@ludo.ninja/components 0.6.0 → 1.0.1

package/src/components/profile/profileUserCards/profileUserCard/index.tsx

@@ -0,0 +1,248 @@
+import React, { useEffect, useState } from 'react';
+
+import Image from 'next/image';
+import Link from 'next/link';
+
+import styled from 'styled-components';
+
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+
+import { useUserStore } from '@/modules/user/store';
+
+import useFollowProfile from '@/api/server-identities/mutations/useFollowProfile';
+import useUnfollowProfile from '@/api/server-identities/mutations/useUnfollowProfile';
+
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { BlackColor, TextGrayColor, WhiteColor } from '@/styles/colors';
+import BoxShadow from '@/styles/mixins/boxShadow';
+import BoxTransform from '@/styles/mixins/boxTransform';
+import { FH6 } from '@/styles/typography';
+
+import SecondaryButton from '@/system/Buttons/SecondaryButton';
+import { ImageInterceptor } from '@/system/Img/ImageInterceptor';
+
+import { getAdaptiveValueWithCheck4k } from '@/utils/adaptive/check4k';
+import { TDimensions } from '@/utils/screen';
+
+import { dmsansFontVarCss } from '@/fonts/vars';
+
+// Styles
+
+const StyledProfileUserCard = styled.div`
+  ${BoxShadow};
+  ${BoxTransform};
+  user-select: none;
+  width: calc(25% - 24px * 3 / 4);
+  background-color: ${WhiteColor};
+  border-radius: 6px;
+  @media (max-width: 1199px) {
+    width: calc(50% - 16px / 2);
+  }
+  @media (max-width: 767px) {
+    width: 100%;
+  }
+
+  .cardLink {
+    font-family: ${dmsansFontVarCss.css};
+    padding: 16px;
+    display: flex;
+    height: 100%;
+
+    @media (max-width: 1199px) {
+      padding: 12px;
+      align-items: center;
+    }
+
+    .cardLinkIcon {
+      margin-right: 12px;
+      border-radius: 50%;
+    }
+
+    .cardLinkContent {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      width: 100%;
+
+      .content {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .caption {
+          line-height: 1.385em;
+          color: ${BlackColor};
+          font-size: 1.3em;
+          font-weight: 700;
+          margin: 0;
+        }
+
+        .text {
+          line-height: 1.2em;
+          color: ${TextGrayColor};
+          font-size: 1.34em;
+          font-weight: 400;
+        }
+      }
+
+      .button {
+        width: 82px;
+      }
+
+      @media (max-width: 1199px) {
+        flex-direction: row;
+        align-items: center;
+        .content {
+          justify-content: center;
+
+          .caption {
+            ${FH6};
+          }
+
+          .text {
+            line-height: 1.1em;
+            margin-top: 4px;
+          }
+        }
+      }
+    }
+  }
+
+  ${mediaQuery.minWidthFourK} {
+    width: calc(25% - ${adaptiveValueCalc((24 * 3) / 4)});
+    border-radius: ${adaptiveValueCalc(6)};
+
+    .cardLink {
+      padding: ${adaptiveValueCalc(16)};
+
+      .cardLinkIcon {
+        margin-right: ${adaptiveValueCalc(12)};
+      }
+
+      .cardLinkContent {
+        .content {
+          .caption {
+            line-height: ${adaptiveValueCalc(14)};
+            font-size: ${adaptiveValueCalc(13)};
+          }
+
+          .text {
+            line-height: ${adaptiveValueCalc(13)};
+            font-size: ${adaptiveValueCalc(14)};
+          }
+        }
+
+        .button {
+          width: ${adaptiveValueCalc(82)};
+        }
+      }
+    }
+  }
+`;
+
+export const ProfileUserCard = ({
+  userId,
+  userPic,
+  userName,
+  followings,
+  isFollowing,
+  windowDimensions,
+}: {
+  userId: string;
+  userPic: string;
+  userName: string | null;
+  followings: number;
+  isFollowing: boolean;
+  windowDimensions: TDimensions | null;
+}) => {
+  const isSignedIn = useUserStore((state) => state.isSignedIn);
+  const getUser = useUserStore((state) => state.user);
+
+  const { followProfile, isFollowedProfile } = useFollowProfile(userId);
+  const { unfollowProfile, isUnFollowedProfile } = useUnfollowProfile(userId);
+  const [isFollowed, setFollow] = useState<boolean>(isFollowing);
+  const [isNeedRenderBtn, setNeedRenderBtn] = useState<boolean>(
+    getUser?.userId !== userId
+  );
+
+  useEffect(() => {
+    if (isSignedIn) {
+      setNeedRenderBtn(getUser?.userId !== userId);
+    }
+  }, [isSignedIn]);
+
+  useEffect(() => {
+    setFollow(isFollowedProfile);
+  }, [isFollowedProfile]);
+
+  useEffect(() => {
+    setFollow(isUnFollowedProfile);
+  }, [isUnFollowedProfile]);
+
+  const handleFollow = async (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    await followProfile();
+  };
+
+  const handleUnFollow = async (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    await unfollowProfile();
+  };
+
+  return (
+    <StyledProfileUserCard>
+      <Link href={`/profile/${userId}/nfts`} className={`cardLink`}>
+        <ImageInterceptor borderRadiusSkeleton={'50%'}>
+          <Image
+            src={userPic as string}
+            className={'cardLinkIcon'}
+            width={
+              windowDimensions && windowDimensions.windowWidth < 1200
+                ? 42
+                : getAdaptiveValueWithCheck4k({
+                    windowDimensions,
+                    currentSize: 72,
+                  })
+            }
+            height={
+              windowDimensions && windowDimensions.windowWidth < 1200
+                ? 42
+                : getAdaptiveValueWithCheck4k({
+                    windowDimensions,
+                    currentSize: 72,
+                  })
+            }
+            alt={'avatar'}
+          />
+        </ImageInterceptor>
+        <div className={'cardLinkContent'}>
+          <div className={'content'}>
+            <h4 className={'caption'}>{userName}</h4>
+            {Boolean(followings) && (
+              <p className={'text'}>{followings} Followers</p>
+            )}
+          </div>
+          {isNeedRenderBtn && (
+            <div className={'button'}>
+              {isFollowed ? (
+                <SecondaryButton
+                  variant={'disabled'}
+                  text={'Unfollow'}
+                  onClick={handleUnFollow}
+                />
+              ) : (
+                <SecondaryButton
+                  variant={'regular'}
+                  text={'+ Follow'}
+                  onClick={handleFollow}
+                />
+              )}
+            </div>
+          )}
+        </div>
+      </Link>
+    </StyledProfileUserCard>
+  );
+};

package/src/components/profile/rank/index.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+import styled from 'styled-components';
+
+import { identitySchema as schema } from '@ludo.ninja/api';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { getRankColor } from '@ludo.ninja/utils';
+
+import { mediaQuery } from '@/styles/ScreenWidth';
+import {
+  BlackColor,
+  InactiveButtonColor,
+  TextGrayColor,
+} from '@/styles/colors';
+
+import { Box, Flex, H2, H6 } from '@system';
+
+// Styles
+const RangeContainer = styled.div`
+  display: block;
+  width: 100%;
+  background: ${InactiveButtonColor};
+  height: 20px;
+  border-radius: 4px;
+
+  ${mediaQuery.minWidthFourK} {
+    height: ${adaptiveValueCalc(20)};
+    border-radius: ${adaptiveValueCalc(4)};
+  }
+`;
+
+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-top-left-radius: ${adaptiveValueCalc(2)};
+    border-bottom-left-radius: ${adaptiveValueCalc(2)};
+  }
+`;
+
+// Interface
+type ProfileInfoProps = Pick<schema.IProfile, 'rank'>;
+
+// Components
+export const ProfileRank = ({ rank }: ProfileInfoProps) => {
+  return (
+    <Box>
+      <H6 color={TextGrayColor} mb={4}>
+        LUDO RANK
+      </H6>
+      <Flex>
+        <Flex alignItems="center" borderRadius={6} width={'100%'}>
+          <H2 mr={16} color={BlackColor}>
+            {(rank as number) ? rank : 'unknown'}
+          </H2>
+          <RangeContainer>
+            <RangeValue rankValue={rank} style={{ width: `${rank}%` }} />
+          </RangeContainer>
+        </Flex>
+      </Flex>
+    </Box>
+  );
+};

package/src/components/profile/stats/index.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import styled from 'styled-components';
+
+import { identitySchema as schema } from '@ludo.ninja/api';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+
+import { mediaQuery } from '@/styles/ScreenWidth';
+
+import { ProfileRank } from '@/components/profile/rank';
+
+import Palete from '@/system/Palete';
+
+// Styles
+
+const StyledProfileStats = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  margin-top: 12px;
+
+  ${mediaQuery.minWidthTablet} {
+    width: 156px;
+    margin-top: 0;
+  }
+
+  ${mediaQuery.minWidthDesktop} {
+    width: 244px;
+    margin-top: 0;
+  }
+
+  ${mediaQuery.minWidthFourK} {
+    width: ${adaptiveValueCalc(244)};
+  }
+`;
+
+// Interface
+
+type ProfileStatsProps = Pick<schema.IProfile, 'rank'>;
+
+// Components
+
+export const ProfileStats = ({ rank }: ProfileStatsProps) => {
+  return (
+    <StyledProfileStats>
+      <Palete>
+        <div className="profileStatsBlock">
+          <ProfileRank rank={rank} />
+        </div>
+      </Palete>
+      {/*{isSignedIn() && profileId !== getUser()?.userId && (*/}
+      {/*  <div className={'profileStatsWorth'}>*/}
+      {/*    <ProfileNetWorth />*/}
+      {/*  </div>*/}
+      {/*)}*/}
+    </StyledProfileStats>
+  );
+};

package/src/components/profile/wallets/index.tsx

@@ -0,0 +1,177 @@
+import React from 'react';
+
+import Image from 'next/image';
+
+import process from 'process';
+import styled from 'styled-components';
+
+import { BlockChainEntity, BlockChainKeys } from '@ludo.ninja/core';
+import { AccentColor, BlackColor } from '@ludo.ninja/ui/build/styles/colors';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { shortenedText } from '@ludo.ninja/utils';
+
+import { useUserStore } from '@/modules/user/store';
+
+import { useUiStore } from '@/store/ui';
+
+import useFetchUserWallets from '@/api/server-identities/queries/useFetchUserWallets';
+
+import { mediaQuery } from '@/styles/ScreenWidth';
+
+import MyWallets from '@/components/myWallets';
+
+import Palete from '@/system/Palete';
+
+import { Flex, H5 } from '@system';
+import { SmallText } from '@system';
+
+import { getAdaptiveScale } from '@/utils/adaptive/scale';
+import { getStaticENVDomain } from '@/utils/env';
+import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
+
+import { dmsansFontVarCss } from '@/fonts/vars';
+
+import PlusIcon from '@/public/wallets/plus.svg';
+
+// Styles
+
+const StyledProfileWallets = styled.div`
+  .manageBtn {
+    cursor: pointer;
+  }
+
+  .wallets {
+    margin-top: 12px;
+
+    .wallet_item {
+      font-family: ${dmsansFontVarCss.css};
+      margin-bottom: 12px;
+      font-size: 13px;
+      color: ${BlackColor};
+
+      .icon {
+        margin-right: 8px;
+        border-radius: 50%;
+      }
+    }
+  }
+
+  .add_wallets {
+    display: flex;
+    cursor: pointer;
+
+    .icon {
+      margin-right: 8px;
+    }
+  }
+
+  ${mediaQuery.minWidthFourK} {
+    .wallets {
+      margin-top: ${adaptiveValueCalc(12)};
+
+      .wallet_item {
+        margin-bottom: ${adaptiveValueCalc(12)};
+        font-size: ${adaptiveValueCalc(13)};
+
+        .icon {
+          margin-right: ${adaptiveValueCalc(8)};
+          width: ${adaptiveValueCalc(16)};
+          height: ${adaptiveValueCalc(16)};
+        }
+      }
+    }
+
+    .add_wallets {
+      .icon {
+        margin-right: ${adaptiveValueCalc(8)};
+        width: ${adaptiveValueCalc(16)};
+        height: ${adaptiveValueCalc(16)};
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+`;
+
+// Component
+
+export const ProfileWallets = () => {
+  const isSignedIn = useUserStore((state) => state.isSignedIn);
+  const getUser = useUserStore((state) => state.user);
+
+  const openModalSidebarPortal = useUiStore(
+    (state) => state.openModalSidebarPortal
+  );
+  const { userWallets } = useFetchUserWallets({
+    userId: getUser?.userId as string,
+  });
+  const { windowDimensions } = useWindowDimensionsWithServerInitial();
+
+  const renderUserWallets = () => {
+    return userWallets?.map((userWallet) => {
+      const blockChain = new BlockChainEntity(
+        userWallet.blockchain as BlockChainKeys
+      );
+      return (
+        <div key={userWallet.address} className={`wallet_item`}>
+          <Image
+            src={blockChain.getBlockChainIconRegular({
+              domain: getStaticENVDomain(),
+            })}
+            className={'icon'}
+            width={16}
+            height={16}
+            alt={blockChain.getBlockChainIconRegular({
+              domain: getStaticENVDomain(),
+            })}
+          />
+          {shortenedText(userWallet?.address as string)}
+        </div>
+      );
+    });
+  };
+
+  if (!isSignedIn) return null;
+
+  const user = new URLSearchParams(getUser as unknown as string).toString();
+
+  return (
+    <StyledProfileWallets>
+      <Palete>
+        <Flex justifyContent="space-between" alignItems="center">
+          <H5 color={BlackColor}>Wallets</H5>
+          <div
+            className={'manageBtn'}
+            onClick={() => openModalSidebarPortal(<MyWallets />)}
+          >
+            <SmallText color={AccentColor}>Manage</SmallText>
+          </div>
+        </Flex>
+        <div className={'wallets'}>{renderUserWallets()}</div>
+        <div
+          className={'add_wallets'}
+          onClick={() => {
+            window.open(
+              `${
+                process.env.NEXT_PUBLIC_AUTH_HOST
+              }/add_wallets/?${user}&fallback_url=${window.location.href.replace(
+                /\s/g,
+                ''
+              )}`,
+              '_self'
+            );
+          }}
+        >
+          <div className={'icon'}>
+            <PlusIcon
+              style={getAdaptiveScale({ windowDimensions, currentSize: 1 })}
+            />
+          </div>
+
+          <SmallText color={AccentColor}>Add new</SmallText>
+        </div>
+      </Palete>
+    </StyledProfileWallets>
+  );
+};

package/src/components/profile/wrapper/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { ProfileEntity } from '@ludo.ninja/core';
+
+import {
+  // profileJSONLD,
+  ProfileInfo,
+  ProfilePageHead,
+} from '@/components/profile';
+
+// Components
+
+export const ProfileWrapper = ({
+  profile,
+  url,
+  children,
+}: {
+  profile: ProfileEntity;
+  url: string;
+  children: React.ReactNode;
+}) => {
+  return (
+    <>
+      <ProfilePageHead userUrl={url} profile={profile} />
+
+      <ProfileInfo profile={profile} />
+
+      {children}
+
+      {/*<script*/}
+      {/*  type="application/ld+json"*/}
+      {/*  dangerouslySetInnerHTML={profileJSONLD(profile as schema.IProfile, '')}*/}
+      {/*/>*/}
+    </>
+  );
+};

package/src/components/registrationPage/index.tsx

@@ -0,0 +1,4 @@
+import RegistrationSelectBox from '@/components/registrationPage/registrationSelectBox';
+import RegistrationSelection from '@/components/registrationPage/registrationSelection';
+
+export { RegistrationSelection, RegistrationSelectBox };

package/src/components/registrationPage/registrationSelectBox/index.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+
+import styled from 'styled-components';
+
+import { BlackColor, WhiteColor } from '@/styles/colors';
+
+const StyledRegistrationSelectBox = styled.div<{
+  image: string;
+  isSelected: boolean;
+}>`
+  min-height: 100px;
+  border-radius: 6px;
+  position: relative;
+  padding: 22px 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-image: url(${(props) => props.image});
+  background-repeat: no-repeat;
+  background-size: cover;
+  cursor: pointer;
+  backdrop-filter: ${(props) => (props.isSelected ? 'blur(2px)' : '')};
+  box-shadow: ${(props) =>
+    props.isSelected ? '0 13px 16px -10px rgba(33, 21, 95, 0.5)' : ''};
+  background-color: ${(props) => (props.isSelected ? 'lightgray 50%' : '')};
+
+  &:hover {
+    background: url(${(props) => props.image}), lightgray 50%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    backdrop-filter: blur(2px);
+    box-shadow: 0 13px 16px -10px rgba(33, 21, 95, 0.5);
+
+    &:before {
+      background: ${(props) => (props.isSelected ? '' : '#6048ff')};
+      opacity: ${(props) => (props.isSelected ? '' : 0.4)};
+    }
+  }
+
+  &:before {
+    content: '';
+    position: absolute;
+    display: block;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background: ${(props) =>
+      props.isSelected ? '#6048ff' : 'rgba(18, 24, 58, 0.4)'};
+    opacity: ${(props) => (props.isSelected ? 0.8 : 0.5)};
+  }
+
+  .text {
+    position: absolute;
+    user-select: none;
+    text-shadow: 1px 1px 1px ${BlackColor};
+    color: ${WhiteColor};
+    text-align: center;
+  }
+
+  .text2 {
+    position: absolute;
+    user-select: none;
+    color: ${WhiteColor};
+    text-align: center;
+  }
+`;
+
+// Interface
+interface Props {
+  name: string;
+  image: string;
+  selected: boolean;
+  onClick: (name: string) => void;
+}
+
+const RegistrationSelectBox: React.FC<Props> = ({
+  name,
+  image,
+  selected,
+  onClick,
+}) => {
+  return (
+    <StyledRegistrationSelectBox
+      isSelected={selected}
+      image={image}
+      onClick={() => onClick(name)}
+    >
+      <h2 className={'text'}>{name}</h2>
+    </StyledRegistrationSelectBox>
+  );
+};
+
+export default RegistrationSelectBox;