@ludo.ninja/components 0.6.0 → 1.0.0

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

@@ -0,0 +1,330 @@
+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

@@ -0,0 +1,192 @@
+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

@@ -0,0 +1,56 @@
+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>
+  );
+};