@ludo.ninja/components 1.4.3 → 1.4.4

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

@@ -1,130 +0,0 @@
-import React from 'react';
-
-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 AssetEntity from '@/dto/AssetEntity';
-
-import { Category } from '../category';
-import { Information } from '../information';
-import { Properties } from '../properties';
-
-type DetailsAccordeonProps = {
-  asset: AssetEntity;
-};
-
-const StyledAccordion = styled.div`
-  .accordion {
-    width: 100%;
-
-    &-header {
-      .accordion-button::after {
-        transform: rotate(90deg);
-        background-image: url('/tabs/arrow_right_dark.svg');
-        width: 24px;
-        height: 24px;
-        background-size: 100%;
-      }
-
-      .accordion-button:not(.collapsed)::after {
-        transform: rotate(-90deg);
-      }
-    }
-
-    &-item {
-      border: none;
-      border-radius: 0;
-      background: transparent;
-    }
-
-    &-body {
-      padding: 10px 0;
-    }
-
-    &-button {
-      padding: 10px 0;
-      color: inherit;
-      box-shadow: none;
-      background: transparent;
-
-      &:not(.collapsed) {
-        background: transparent;
-      }
-    }
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    .accordion {
-      &-header {
-        .accordion-button::after {
-          width: ${adaptiveValueCalc(24)};
-          height: ${adaptiveValueCalc(24)};
-        }
-      }
-
-      &-body {
-        padding: ${adaptiveValueCalc(10)} 0;
-      }
-
-      &-button {
-        padding: ${adaptiveValueCalc(10)} 0;
-      }
-    }
-  }
-`;
-
-const StyledCategoryH3 = styled(H3)`
-  padding-top: 10px;
-  margin-bottom: 20px;
-
-  ${mediaQuery.minWidthFourK} {
-    padding-top: ${adaptiveValueCalc(10)};
-    margin-bottom: ${adaptiveValueCalc(20)};
-  }
-`;
-
-export const DetailsAccordeon = ({ asset }: DetailsAccordeonProps) => {
-  const attributes = asset.getAttributes();
-
-  return (
-    <StyledAccordion>
-      <Accordion defaultActiveKey="1" style={{ width: '100%' }}>
-        {(attributes.length && (
-          <>
-            <Accordion.Item eventKey="0">
-              <Accordion.Header>
-                <H3>Properties</H3>
-              </Accordion.Header>
-              <Accordion.Body>
-                <Properties attributes={attributes} />
-              </Accordion.Body>
-            </Accordion.Item>
-            <hr />
-          </>
-        )) ||
-          null}
-        <Accordion.Item eventKey="1">
-          <Accordion.Header>
-            <H3>Chain Info</H3>
-          </Accordion.Header>
-          <Accordion.Body>
-            <Information asset={asset} />
-          </Accordion.Body>
-        </Accordion.Item>
-        <hr />
-        {asset.getCategory() && (
-          <>
-            <StyledCategoryH3>Category</StyledCategoryH3>
-            <Category asset={asset} />
-          </>
-        )}
-      </Accordion>
-    </StyledAccordion>
-  );
-};

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

@@ -1,299 +0,0 @@
-import React, { 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 AssetEntity from '@/dto/AssetEntity';
-
-import GalleryIcon from '@/public/assetPage/favorite.svg';
-import FavoriteIcon from '@/public/assetPage/flag.svg';
-import ShareIcon from '@/public/assetPage/shareWithDots.svg';
-
-const ImageDetails = styled.div`
-  margin-top: 16px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 510px;
-
-  ${mediaQuery.desktop} {
-    width: 335px;
-    margin-top: 16px;
-  }
-
-  @media (max-width: 767px) {
-    margin-top: 24px;
-    align-items: center;
-    width: 100%;
-    margin-right: 0;
-  }
-
-  h5:hover {
-    color: ${BlackColor};
-  }
-
-  ${StyledLikes} {
-    margin-right: 20px;
-    cursor: pointer;
-  }
-
-  .icon.liked {
-    path {
-      fill: #f94c66;
-    }
-  }
-
-  .shareIconStyle {
-    path {
-      stroke: none;
-      fill: ${TextDarkGrayColor};
-    }
-
-    :hover {
-      path {
-        fill: ${TextGrayColor};
-      }
-    }
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    margin-top: ${adaptiveValueCalc(16)};
-    width: ${adaptiveValueCalc(510)};
-
-    ${StyledLikes} {
-      margin-right: ${adaptiveValueCalc(20)};
-    }
-  }
-`;
-
-const SIconResizeWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  ${mediaQuery.minWidthFourK} {
-    width: ${adaptiveValueCalc(16)};
-    height: ${adaptiveValueCalc(16)};
-  }
-`;
-
-export const Figcaption = ({ asset }: { asset: AssetEntity | null }) => {
-  const isSignedIn = useUserStore((state) => state.isSignedIn);
-  const getUser = useUserStore((state) => state.user);
-
-  const { likesByUser, isLikedByUser, loading } = useFetchDynamicAssetLikes({
-    assetId: asset?.getAssetId() || '',
-  });
-
-  const url =
-    typeof window !== 'undefined'
-      ? window.location.origin + window.location.pathname
-      : null;
-  const { openModal, closeModal, openModalSidebarPortal, openAlert } =
-    useUiStore((state) => ({
-      openModal: state.openModal,
-      closeModal: state.closeModal,
-      openAlert: state.openAlert,
-      openModalSidebarPortal: state.openModalSidebarPortal,
-    }));
-
-  const { userId } = authCookies.getCookies();
-
-  const { windowDimensions, isMobile } = useWindowDimensionsWithServerInitial();
-  const currentDimensions = windowDimensions?.windowWidth || 1440;
-
-  // const isCreator = useMemo(
-  //   () =>
-  //     Boolean(
-  //       asset?.getCreatorsProfiles() &&
-  //         asset
-  //           ?.getCreatorsProfiles()
-  //           .filter((item: schema.IProfile) => item?.userId === userId)
-  //     ),
-  //   [asset?.getCreatorsProfiles()]
-  // );
-  const isOwner = useMemo(
-    () =>
-      asset?.getOwnersProfiles().filter((item) => item?.userId === userId)
-        .length !== 0,
-    [asset?.getOwnersProfiles()]
-  );
-
-  const onShareBtnClick = () => {
-    const title = asset?.getName() || undefined;
-
-    openModal(
-      <ShareDialog
-        link={url}
-        onHide={closeModal}
-        params={{
-          telegram: {
-            title,
-          },
-          whatsapp: {
-            title,
-          },
-          twitter: {
-            title,
-            hashtags: ['ludo', 'nft'],
-          },
-          reddit: {
-            title,
-          },
-          facebook: {
-            quote: title,
-            hashtag: '#ludo',
-          },
-        }}
-      />
-    );
-  };
-
-  const onAddFavoriteClick = () =>
-    openModalSidebarPortal(
-      <AddAssetToFavoriteList ids={[asset?.getAssetId() as string]} />
-    );
-  const onAddGalleryClick = () =>
-    openModalSidebarPortal(
-      <AddAssetToGallery ids={[asset?.getAssetId() as string]} />
-    );
-
-  return (
-    <ImageDetails>
-      <Flex alignItems="center">
-        {loading ? (
-          <Skeleton
-            style={{
-              borderRadius: `${getAdaptiveValueWithCheck4k({
-                windowDimensions,
-                currentSize: 3,
-              })}px`,
-              marginRight: `${getAdaptiveValueWithCheck4k({
-                windowDimensions,
-                currentSize: 16.8,
-              })}px`,
-            }}
-            height="100%"
-            width={`${getAdaptiveValueWithCheck4k({
-              windowDimensions,
-              currentSize: 30,
-            })}px`}
-          />
-        ) : (
-          <AssetLikes
-            assetId={asset?.getAssetId() || ''}
-            isLikedByUser={isLikedByUser}
-            likesByUser={likesByUser}
-          />
-        )}
-
-        {isSignedIn && (
-          <>
-            {((asset?.getCreatorsAddresses() &&
-              asset?.getCreatorsAddresses()?.[0] === getUser?.wallets[0]) ||
-              isOwner) && (
-              <IconWithButton
-                variant={'figcaption'}
-                text={
-                  currentDimensions > ScreenWidth.DESKTOP
-                    ? 'Add to Gallery'
-                    : '+ Gallery'
-                }
-                onClick={onAddGalleryClick}
-              >
-                <SIconResizeWrapper>
-                  <GalleryIcon
-                    style={getAdaptiveScale({
-                      windowDimensions,
-                      currentSize: 1,
-                    })}
-                  />
-                </SIconResizeWrapper>
-              </IconWithButton>
-            )}
-            <IconWithButton
-              variant={'figcaption'}
-              text={
-                currentDimensions > ScreenWidth.DESKTOP
-                  ? 'Add to Favourite list'
-                  : '+Fave list'
-              }
-              onClick={onAddFavoriteClick}
-            >
-              <SIconResizeWrapper>
-                <FavoriteIcon
-                  style={getAdaptiveScale({ windowDimensions, currentSize: 1 })}
-                />
-              </SIconResizeWrapper>
-            </IconWithButton>
-          </>
-        )}
-      </Flex>
-      <Flex>
-        {!isMobile && (
-          <IconWithButton variant={'share'} text={''} onClick={onShareBtnClick}>
-            <SIconResizeWrapper>
-              <ShareIcon
-                className="shareIconStyle"
-                style={getAdaptiveScale({ windowDimensions, currentSize: 1 })}
-              />
-            </SIconResizeWrapper>
-          </IconWithButton>
-        )}
-
-        <MoreDropDown
-          items={[
-            // {
-            //   id: 'make',
-            //   title: 'Make profile picture',
-            // },
-            {
-              id: 'copy',
-              title: 'Copy link',
-              async onClick() {
-                await copyToClipboard(window.location.href);
-                openAlert({
-                  type: alertVariants.copied,
-                });
-              },
-            },
-            // {
-            //   id: 'Hide',
-            //   title: 'Hide'
-            // }
-          ]}
-        />
-      </Flex>
-    </ImageDetails>
-  );
-};

package/src/components/assetPage/index.ts

@@ -1,13 +0,0 @@
-export { Participants } from './participants';
-export { Title } from './tittle';
-export { AssetMedia } from './assetNft';
-export { PriceRank } from './priceRank';
-export { Properties } from './properties';
-export { Information } from './information';
-export { DetailsAccordeon } from './detailsAccordeon';
-export { Description } from './description';
-export { MarketPlaces } from './marketPlaces';
-export { CollectionSlider } from './slider';
-export { AudioVideoPlayer } from './audioVideoPlayer';
-export { Viewer3D } from './viewer3D';
-export { Figcaption } from './figCaption';

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

@@ -1,194 +0,0 @@
-import React, { CSSProperties } from 'react';
-
-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 AssetEntity from '@/dto/AssetEntity';
-
-import { poppinsFontVarCss } from '@/fonts/vars';
-
-type InformationProps = {
-  asset: AssetEntity;
-};
-
-const StyledImage = styled.img`
-  border-radius: 50%;
-  width: 16px;
-  height: 16px;
-  ${mediaQuery.minWidthFourK} {
-    width: ${adaptiveValueCalc(16)};
-    height: ${adaptiveValueCalc(16)};
-  }
-`;
-
-const BoxOverflow = styled.div`
-  text-align: right;
-  white-space: nowrap;
-  width: 90px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  ${mediaQuery.minWidthFourK} {
-    width: ${adaptiveValueCalc(90)};
-  }
-`;
-
-const FlexOverflow = styled(Flex)`
-  justify-content: space-between;
-  gap: 8px;
-  margin-bottom: 8px;
-
-  * {
-    white-space: nowrap;
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    gap: ${adaptiveValueCalc(8)};
-    margin-bottom: ${adaptiveValueCalc(8)};
-  }
-`;
-const OverflowH5 = styled(H5)`
-  text-overflow: ellipsis;
-  overflow: hidden;
-`;
-
-const SBlockchain = styled(Flex)`
-  text-align: center;
-  align-items: center;
-  width: max-content;
-  background: ${({ theme }) => theme.colors.buttonInactive};
-  transition: background-color 0.2s ease-in;
-  padding: 4px 8px;
-  border-radius: 6px;
-  gap: 6px;
-
-  p {
-    color: ${BlackColor};
-    font-family: ${poppinsFontVarCss.css};
-    font-size: 15px;
-    font-weight: 500;
-    line-height: 22px;
-  }
-
-  &:hover {
-    background: ${({ theme }) => theme.colors.accentHoverBg};
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    padding: ${adaptiveValueCalc(4)} ${adaptiveValueCalc(8)};
-    border-radius: ${adaptiveValueCalc(6)};
-    gap: ${adaptiveValueCalc(6)};
-
-    p {
-      font-size: ${adaptiveValueCalc(15)};
-      line-height: ${adaptiveValueCalc(22)};
-    }
-  }
-`;
-
-const SFlex = styled(Flex)`
-  margin-bottom: 8px;
-
-  ${mediaQuery.minWidthFourK} {
-    margin-bottom: ${adaptiveValueCalc(8)};
-  }
-`;
-
-export const Information = ({ asset }: InformationProps) => {
-  const tokenId = asset.getTokenId();
-  const splittedAssetId = asset.getSplitedAssetId();
-  const address = asset.getAddress();
-  const blockChain = asset.getBlockchain();
-  const blockTimestamp = asset.getBlockTimestamp();
-
-  const id = tokenId ? tokenId : splittedAssetId;
-  const idTittle = tokenId ? 'Token ID' : 'ID';
-
-  const { deviceType } = useWindowDimensions();
-
-  const isDesktop = deviceType === 'isDesktop';
-
-  const styleOverflow: CSSProperties | undefined = isDesktop
-    ? { overflow: 'hidden' }
-    : undefined;
-
-  return (
-    <Flex flexDirection="column" justifyContent="space-between">
-      <SFlex justifyContent="space-between" alignItems="center">
-        <H5 color={TextGrayColor}>Blockchain</H5>
-        <Link
-          href={`/search/nfts?blockchain=${blockChain.getBlockChainPrivateLabel()}`}
-        >
-          <SBlockchain>
-            <p>{blockChain.getBlockChainPublicLabel()}</p>
-            <StyledImage
-              width={16}
-              height={16}
-              src={
-                blockChain.getBlockChainIconRegular({
-                  domain: getStaticENVDomain(),
-                }) as string
-              }
-              alt={blockChain.getBlockChainPublicLabel() as string}
-            />
-          </SBlockchain>
-        </Link>
-      </SFlex>
-      {address && (
-        <FlexOverflow>
-          <H5 color={TextGrayColor}>Contract Address</H5>
-          <CopyButton value={address} style={styleOverflow}>
-            {isDesktop ? (
-              <OverflowH5 color={AccentColor} title={address}>
-                {address}
-              </OverflowH5>
-            ) : (
-              <H5 color={AccentColor} title={address}>
-                {shortenedText(address as string)}
-              </H5>
-            )}
-          </CopyButton>
-        </FlexOverflow>
-      )}
-      <FlexOverflow>
-        <H5 color={TextGrayColor}>{idTittle}</H5>
-        <CopyButton value={id} style={styleOverflow}>
-          {isDesktop ? (
-            <OverflowH5 color={AccentColor} title={id}>
-              {id}
-            </OverflowH5>
-          ) : (
-            <BoxOverflow>
-              <H5 color={AccentColor} title={id}>
-                <BoxOverflow>{id}</BoxOverflow>
-              </H5>
-            </BoxOverflow>
-          )}
-        </CopyButton>
-      </FlexOverflow>
-      {blockTimestamp && (
-        <SFlex justifyContent="space-between">
-          <H5 color={TextGrayColor}>Added on</H5>
-          <H5 color={TextGrayColor}>
-            {moment(blockTimestamp * 1000).format('LL')}
-          </H5>
-        </SFlex>
-      )}
-    </Flex>
-  );
-};