@ludo.ninja/components 1.4.2 → 1.4.4

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

@@ -1,330 +0,0 @@
-import React from 'react';
-
-import Link from 'next/link';
-
-import styled from 'styled-components';
-
-import { identitySchema as schema } from '@ludo.ninja/api';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { shortenedText } from '@ludo.ninja/utils';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BlackColor, TextGrayColor } from '@/styles/colors';
-
-import { Flex, H5, H6, ProfilePic } from '@system';
-
-import { getAdaptiveScale } from '@/utils/adaptive/scale';
-import { CopyButton } from '@/utils/copyBtn';
-import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-
-import { getUserPicImage } from '@/dto/common/Media/Urls';
-
-import DetailsIcon from '@/public/assetPage/details.svg';
-
-type ParticipantsProps = {
-  creatorsAddresses: string[] | null;
-  creatorsProfiles: schema.IProfile[];
-  ownersProfiles: schema.IProfile[];
-  ownersAddresses: string[] | null;
-};
-
-const MultiFlexRight = styled(Flex)`
-  margin-left: 100px;
-  align-items: center;
-
-  ${mediaQuery.desktop} {
-    margin: 20px 0 0 0;
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    margin-left: ${adaptiveValueCalc(100)};
-  }
-`;
-
-const MultiFlex = styled(Flex)`
-  margin: 20px 0 10px;
-
-  ${mediaQuery.desktop} {
-    flex-direction: column;
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    margin: ${adaptiveValueCalc(20)} 0 ${adaptiveValueCalc(10)};
-  }
-`;
-
-const SMultipleCreators = styled(Flex)`
-  margin-left: 20px;
-
-  img {
-    width: 40px;
-    height: 40px;
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    margin-left: ${adaptiveValueCalc(20)};
-
-    img {
-      width: ${adaptiveValueCalc(40)};
-      height: ${adaptiveValueCalc(40)};
-    }
-  }
-`;
-
-const SMultipleCreatorsH6 = styled(H6)`
-  margin-left: 15px;
-  color: ${TextGrayColor};
-
-  ${mediaQuery.minWidthFourK} {
-    margin-left: ${adaptiveValueCalc(15)};
-  }
-`;
-
-const MultipleCreators = ({
-  creatorsProfiles,
-  creatorsAddresses,
-}: {
-  creatorsProfiles: schema.IProfile[];
-  creatorsAddresses: string[] | null;
-}) => {
-  if (!creatorsProfiles && !creatorsAddresses) return null;
-
-  let accumulatedResult;
-  if (creatorsProfiles) {
-    accumulatedResult = [...creatorsProfiles];
-  }
-
-  if (creatorsAddresses) {
-    creatorsAddresses.map((item) => {
-      return { userId: item, userpic: '/defaultUserpics/defaultUserpic.svg' };
-    });
-
-    accumulatedResult = [
-      ...(accumulatedResult as unknown as schema.IProfile[]),
-      creatorsAddresses as unknown as schema.IProfile[],
-    ];
-  }
-
-  return (
-    <Flex alignItems="center">
-      <SMultipleCreators flexDirection="row" alignItems="center">
-        {creatorsProfiles?.slice(0, 3).map((creator) => {
-          return (
-            <ProfilePic
-              size={40}
-              key={creator?.userId}
-              userPicSrc={getUserPicImage(
-                creator?.userpic as string,
-                '/defaultUserpics/defaultUserpic.svg'
-              )}
-            />
-          );
-        })}
-        <SMultipleCreatorsH6>
-          {accumulatedResult && accumulatedResult?.length} Creators
-        </SMultipleCreatorsH6>
-      </SMultipleCreators>
-    </Flex>
-  );
-};
-
-const SSingleUserLink = styled(Link)`
-  font-size: 14px;
-
-  ${mediaQuery.minWidthFourK} {
-    font-size: ${adaptiveValueCalc(14)};
-  }
-`;
-
-const SSingleUser = styled(Flex)`
-  margin-bottom: 10px;
-
-  img {
-    width: 40px;
-    height: 40px;
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    margin-bottom: ${adaptiveValueCalc(10)};
-
-    img {
-      width: ${adaptiveValueCalc(40)};
-      height: ${adaptiveValueCalc(40)};
-    }
-  }
-`;
-
-const SSingleUserFlex = styled(Flex)`
-  margin-left: 16px;
-
-  ${mediaQuery.minWidthFourK} {
-    margin-left: ${adaptiveValueCalc(16)};
-  }
-`;
-
-const SingleUser = (props: {
-  profile?: Partial<schema.IProfile> | null;
-  address?: string | null;
-  title: string;
-}) => {
-  if (!props.profile && !props.address) return null;
-
-  const isLudoWallet = (userName: string) => {
-    return userName ? (
-      <H5 color={BlackColor}>{userName}</H5>
-    ) : (
-      <CopyButton value={props.address}>
-        <H5 color={BlackColor}>{shortenedText(props.address as string)}</H5>
-      </CopyButton>
-    );
-  };
-
-  const ludoUserMurkUp = (name?: string | null) => {
-    return name ? (
-      <SSingleUserLink href={`/profile/${props.profile?.userId}/nfts`}>
-        {name}
-      </SSingleUserLink>
-    ) : (
-      isLudoWallet(props.profile?.username as string)
-    );
-  };
-
-  return (
-    <SSingleUser width={'50%'} alignItems="center">
-      {Boolean(props?.profile && props?.profile?.userpic) && (
-        <ProfilePic
-          size={40}
-          userPicSrc={getUserPicImage(
-            props?.profile?.userpic as string,
-            '/defaultUserpics/defaultUserpic.svg'
-          )}
-        />
-      )}
-      {Boolean(props?.profile && props?.profile?.userpic) || (
-        <ProfilePic
-          size={40}
-          userPicSrc={'/defaultUserpics/defaultUserpic.svg'}
-        />
-      )}
-
-      <SSingleUserFlex flexDirection="column">
-        <H6 color={TextGrayColor}>{props.title}</H6>
-        {ludoUserMurkUp(props?.profile && (props.profile.username as string))}
-      </SSingleUserFlex>
-    </SSingleUser>
-  );
-};
-
-const SIconWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 12px;
-  height: 12px;
-  margin-right: 10px;
-
-  ${mediaQuery.minWidthFourK} {
-    width: ${adaptiveValueCalc(12)};
-    height: ${adaptiveValueCalc(12)};
-    margin-right: ${adaptiveValueCalc(10)};
-  }
-`;
-
-const DetailsIconResize = () => {
-  const { windowDimensions } = useWindowDimensionsWithServerInitial();
-
-  return (
-    <SIconWrapper>
-      <DetailsIcon
-        style={getAdaptiveScale({ windowDimensions, currentSize: 1 })}
-      />
-    </SIconWrapper>
-  );
-};
-
-const SMultipleOwnersFlex = styled(Flex)`
-  margin-bottom: 7px;
-
-  ${mediaQuery.minWidthFourK} {
-    margin-bottom: ${adaptiveValueCalc(7)};
-  }
-`;
-
-const MultipleOwners = ({
-  ownersProfiles,
-  ownersAddresses,
-}: {
-  ownersProfiles: schema.IProfile[];
-  ownersAddresses: string[] | null;
-}) => {
-  if (!ownersAddresses && !ownersProfiles) return null;
-
-  let accumulatedResult = [...ownersProfiles];
-
-  if (ownersAddresses) {
-    accumulatedResult = [
-      ...accumulatedResult,
-      ownersAddresses as unknown as schema.IProfile,
-    ];
-  }
-  return (
-    <MultiFlexRight alignItems="center">
-      <Flex flexDirection="column">
-        <SMultipleOwnersFlex alignItems="center">
-          <DetailsIconResize />{' '}
-          <H6>
-            {accumulatedResult.length}{' '}
-            {accumulatedResult.length > 1 ? 'Owners' : 'Owner'}
-          </H6>
-        </SMultipleOwnersFlex>
-        {/*<Flex alignItems="center">*/}
-        {/*  <OwnersIcon style={{ margin: '0 8.5px 0px -1.5px' }} />{' '}*/}
-        {/*  <H6>14/100 Copies owned</H6>*/}
-        {/*</Flex>*/}
-      </Flex>
-    </MultiFlexRight>
-  );
-};
-
-export const Participants = ({
-  creatorsProfiles,
-  ownersProfiles,
-  creatorsAddresses,
-  ownersAddresses,
-}: ParticipantsProps) => {
-  // console.clear();
-  // console.log(creatorsProfiles, 'creatorsProfiles');
-  // console.log(creatorsAddresses, 'creatorsAddresses');
-  // console.log(ownersProfiles, 'ownersProfiles');
-
-  return (
-    <>
-      {(creatorsProfiles?.length && creatorsProfiles?.length > 1) ||
-      (ownersProfiles?.length && ownersProfiles?.length > 1) ? (
-        <MultiFlex>
-          <MultipleCreators
-            creatorsAddresses={creatorsAddresses}
-            creatorsProfiles={creatorsProfiles}
-          />
-          <MultipleOwners
-            ownersProfiles={ownersProfiles}
-            ownersAddresses={ownersAddresses}
-          />
-        </MultiFlex>
-      ) : (
-        <MultiFlex>
-          <SingleUser
-            title="Creator"
-            address={creatorsAddresses?.[0]}
-            profile={creatorsProfiles?.[0]}
-          />
-          <SingleUser
-            title="Owner"
-            address={ownersAddresses?.[0]}
-            profile={ownersProfiles?.[0]}
-          />
-        </MultiFlex>
-      )}
-    </>
-  );
-};

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

@@ -1,192 +0,0 @@
-import React from 'react';
-
-import styled from 'styled-components';
-
-// import Skeleton from 'react-loading-skeleton';
-import { BlockChainEntity } from '@ludo.ninja/core';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { getRankColor } from '@ludo.ninja/utils';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-import {
-  BlackColor,
-  InactiveButtonColor,
-  TextGrayColor,
-  WhiteColor,
-} from '@/styles/colors';
-
-import { Box, Flex, H2, H3, H6 } from '@system';
-
-type PriceRankProps = {
-  blockchain: BlockChainEntity;
-  rank: number;
-  latestPriceAmount: number | null;
-  latestPriceCurrency: string | null;
-};
-
-const RangeContainer = styled.div`
-  display: block;
-  width: 100px;
-  background: ${InactiveButtonColor};
-  height: 9px;
-  border-radius: 2px;
-
-  ${mediaQuery.desktop} {
-    width: 40px;
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    width: ${adaptiveValueCalc(100)};
-    height: ${adaptiveValueCalc(9)};
-    border-radius: ${adaptiveValueCalc(2)};
-  }
-`;
-
-const RangeValue = styled.div<{ rankValue: number | null | undefined }>`
-  display: block;
-  background: ${(props) => props.rankValue && getRankColor(props.rankValue)};
-  height: 100%;
-  border-radius: 2px 0 0 2px;
-
-  ${mediaQuery.minWidthFourK} {
-    border-radius: ${adaptiveValueCalc(2)} 0 0 ${adaptiveValueCalc(2)};
-  }
-`;
-
-const SPrice = styled(Box)`
-  width: 65%;
-  border-radius: 6px;
-  margin-right: 15px;
-  padding: 15px;
-  background-color: ${WhiteColor};
-
-  .title-price {
-    margin-bottom: 6px;
-  }
-
-  .price-latest {
-    margin-left: 8px;
-    margin-right: 8px;
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    border-radius: ${adaptiveValueCalc(6)};
-    margin-right: ${adaptiveValueCalc(15)};
-    padding: ${adaptiveValueCalc(15)};
-
-    .title-price {
-      margin-bottom: ${adaptiveValueCalc(6)};
-    }
-
-    .price-latest {
-      margin-left: ${adaptiveValueCalc(8)};
-      margin-right: ${adaptiveValueCalc(8)};
-    }
-  }
-`;
-
-const SPriceFlex = styled(Flex)`
-  border-radius: 6px;
-
-  ${mediaQuery.minWidthFourK} {
-    border-radius: ${adaptiveValueCalc(6)};
-  }
-`;
-
-const SRank = styled(Box)`
-  width: 35%;
-  border-radius: 6px;
-  padding: 15px;
-
-  .rank-title {
-    margin-bottom: 6px;
-  }
-
-  .rank-text {
-    margin-right: 8px;
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    border-radius: ${adaptiveValueCalc(6)};
-    padding: ${adaptiveValueCalc(15)};
-
-    .rank-title {
-      margin-bottom: ${adaptiveValueCalc(6)};
-    }
-
-    .rank-text {
-      margin-right: ${adaptiveValueCalc(8)};
-    }
-  }
-`;
-
-export const PriceRank = ({
-  rank,
-  latestPriceAmount,
-  latestPriceCurrency,
-}: PriceRankProps) => {
-  // const { isLoading, converterAmount } = useConvertedValue({
-  //   latestPriceCurrency,
-  //   latestPriceAmount,
-  // });
-
-  return (
-    <Flex>
-      {latestPriceAmount && latestPriceAmount !== 0 && latestPriceCurrency && (
-        <SPrice>
-          <H6 color={TextGrayColor} className="title-price">
-            Price
-          </H6>
-          <Flex>
-            <SPriceFlex alignItems="center">
-              {/*<Box*/}
-              {/*  width={25}*/}
-              {/*  height={25}*/}
-              {/*  borderRadius={6}*/}
-              {/*  style={{*/}
-              {/*    background: `url(/assetPage/blockchains/square/${blockchain}.svg) no-repeat`,*/}
-              {/*    backgroundSize: 'cover',*/}
-              {/*  }}*/}
-              {/*/>*/}
-              <H2 color={BlackColor} className="price-latest">
-                {latestPriceAmount}
-              </H2>
-              {/*{converterAmount > 0 && (*/}
-              {/*  <H5 mb={0} color={TextGrayColor}>*/}
-              {/*    {isLoading ? (*/}
-              {/*      <Skeleton height="20px" width="40px" />*/}
-              {/*    ) : (*/}
-              {/*      `~$` + converterAmount*/}
-              {/*    )}*/}
-              {/*  </H5>*/}
-              {/*)}*/}
-            </SPriceFlex>
-          </Flex>
-        </SPrice>
-      )}
-      <SRank backgroundColor={WhiteColor}>
-        <H6 color={TextGrayColor} className="rank-title">
-          Ludo Rank
-        </H6>
-        <Flex>
-          <SPriceFlex alignItems="center">
-            {rank ? (
-              <>
-                <H2 color={BlackColor} className="rank-text">
-                  {rank}
-                </H2>
-                <RangeContainer>
-                  <RangeValue rankValue={rank} style={{ width: `${rank}%` }} />
-                </RangeContainer>
-              </>
-            ) : (
-              <H3 color={BlackColor} className="rank-text">
-                unknown
-              </H3>
-            )}
-          </SPriceFlex>
-        </Flex>
-      </SRank>
-    </Flex>
-  );
-};

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

@@ -1,56 +0,0 @@
-import React from 'react';
-
-import styled from 'styled-components';
-
-import { assetSchema as schema } from '@ludo.ninja/api';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BorderColorLight, TextGrayColor } from '@/styles/colors';
-
-import { Flex, H5, H6 } from '@system';
-
-type PropertiesProps = Pick<schema.IAsset, 'attributes'>;
-
-const Wrapper = styled.div`
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 15px;
-
-  ${mediaQuery.tablet} {
-    gap: 10px;
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    gap: ${adaptiveValueCalc(15)};
-  }
-`;
-
-const SFlex = styled(Flex)`
-  border-radius: 6px;
-  border: 1px solid ${BorderColorLight};
-  padding: 10px 16px;
-
-  ${mediaQuery.minWidthFourK} {
-    border-radius: ${adaptiveValueCalc(6)};
-    border: ${adaptiveValueCalc(1)} solid ${BorderColorLight};
-    padding: ${adaptiveValueCalc(10)} ${adaptiveValueCalc(16)};
-  }
-`;
-
-export const Properties = ({ attributes }: PropertiesProps) => {
-  return (
-    <Wrapper>
-      {attributes?.map((item) => {
-        return (
-          <SFlex flexDirection="column" key={item?.name}>
-            <H6 style={{ wordBreak: 'break-word' }} color={TextGrayColor}>
-              {item?.name}
-            </H6>
-            <H5 style={{ wordBreak: 'break-word' }}>{item?.value}</H5>
-          </SFlex>
-        );
-      })}
-    </Wrapper>
-  );
-};