@ludo.ninja/components 0.5.0 → 1.0.0

package/src/components/navigation/index.tsx

@@ -0,0 +1,199 @@
+import React, { useState } from 'react';
+
+import { useRouter } from 'next/router';
+
+import styled from 'styled-components';
+
+import { mediaQuery } from '@/styles/ScreenWidth';
+// import NotificationIcon from '@/public/settings_page/notifications.svg';
+// import NotificationActiveIcon from '@/public/settings_page/notifications_active.svg';
+import {
+  BackgroundColorLight,
+  BlackColor,
+  InactiveButtonColor,
+  TextGrayColor,
+} from '@/styles/colors';
+
+import {
+  Flex,
+  H1, // Box
+} from '@system';
+
+import BackIcon from '@/public/settings_page/back.svg';
+import MenuIcon from '@/public/settings_page/burger_menu.svg';
+// import PrivacyIcon from '@/public/settings_page/privacy.svg';
+// import PrivacyActiveIcon from '@/public/settings_page/privacy_active.svg';
+import SettingsIcon from '@/public/settings_page/settings.svg';
+import SettingsActiveIcon from '@/public/settings_page/settings_active.svg';
+
+export enum NavigationTabs {
+  settings = 'settings',
+  notifications = 'notifications',
+  privacy = 'privacy',
+}
+
+const StyledFlex = styled(Flex)<{ isOpen: boolean }>`
+  display: none;
+
+  ${mediaQuery.tablet} {
+    cursor: pointer;
+    position: relative;
+    // position: ${(props) => (props.isOpen ? 'fixed' : 'relative')};
+    z-index: 1;
+    display: flex;
+  }
+`;
+
+const Wrapper = styled(Flex)`
+  flex-direction: column;
+  width: 250px;
+
+  ${mediaQuery.tablet} {
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    padding-top: 110px;
+    padding-left: 25px;
+    position: fixed;
+    overflow: hidden;
+    transition: transform ease-in-out 300ms;
+    background: ${BackgroundColorLight};
+    box-shadow: 20px 16px 32px -16px rgba(33, 21, 95, 0.2);
+    z-index: 1;
+
+    &.hide {
+      transform: translate(calc(-100% - 20px), 0);
+    }
+
+    &.show {
+      transform: translate(0%, 0%);
+    }
+  }
+`;
+
+const StyledH1 = styled(H1)`
+  ${mediaQuery.tablet} {
+    padding-top: 25px;
+    text-align: center;
+  }
+  ${mediaQuery.bigPhone} {
+    margin-top: -45px;
+  }
+
+  svg {
+    display: none;
+    ${mediaQuery.tablet} {
+      display: flex;
+      cursor: pointer;
+      position: absolute;
+      left: 15px;
+      margin-top: -25px;
+    }
+    // ${mediaQuery.bigPhone} {
+    //   margin-top: -25px;
+    // }
+  }
+`;
+
+const List = styled.ul`
+  margin: 0;
+  padding: 20px 0 0 0;
+  list-style-type: none;
+
+  ${mediaQuery.tablet} {
+    padding-left: 50px;
+  }
+
+  li {
+    padding-left: 5px;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 50px;
+    font-size: 15px;
+    cursor: pointer;
+    color: ${TextGrayColor};
+
+    svg {
+      margin-right: 5px;
+
+      ${mediaQuery.tablet} {
+        margin-right: 15px;
+      }
+    }
+
+    .activeIcon {
+      display: none;
+    }
+    .icon {
+      display: flex;
+    }
+
+    &.activeTab {
+      background: ${InactiveButtonColor};
+      color: ${BlackColor};
+
+      ${mediaQuery.tablet} {
+        background: transparent;
+      }
+
+      .icon {
+        display: none;
+      }
+      .activeIcon {
+        display: flex;
+      }
+    }
+  }
+`;
+
+const Navigation = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const router = useRouter();
+  const activeTab = router.pathname.split('/').at(-2);
+
+  return (
+    <>
+      <StyledFlex isOpen={isOpen}>
+        {isOpen ? (
+          <BackIcon onClick={() => setIsOpen(false)} />
+        ) : (
+          <MenuIcon onClick={() => setIsOpen(true)} />
+        )}
+        {/*<MenuIcon onClick={() => setIsOpen(true)}/>*/}
+      </StyledFlex>
+      <Wrapper className={`mobile_menu ${isOpen ? 'show' : 'hide'}`}>
+        <StyledH1>
+          {isOpen && <BackIcon onClick={() => setIsOpen(false)} />}
+          Settings
+        </StyledH1>
+        <List>
+          <li
+            className={`${
+              activeTab === NavigationTabs.settings ? 'activeTab' : ''
+            } `}
+          >
+            <SettingsIcon className={'icon'} />
+            <SettingsActiveIcon className={'activeIcon'} />
+            <span>Settings</span>
+          </li>
+          {/*<li className={`${activeTab === NavigationTabs.notifications ? 'activeTab' : ''} `}>*/}
+          {/*  <NotificationIcon className={'icon'}/>*/}
+          {/*  <NotificationActiveIcon className={'activeIcon'}/>*/}
+          {/*  <span>Notifications</span>*/}
+          {/*</li>*/}
+          {/*<li className={`${activeTab === NavigationTabs.privacy ? 'activeTab' : ''} `}>*/}
+          {/*  <PrivacyIcon className={'icon'}/>*/}
+          {/*  <PrivacyActiveIcon className={'activeIcon'}/>*/}
+          {/*  <span>Privacy</span>*/}
+          {/*</li>*/}
+        </List>
+      </Wrapper>
+    </>
+  );
+};
+
+export default Navigation;

package/src/components/profile/MultiversXAudit/MultiversXAudit.tsx

@@ -0,0 +1,230 @@
+import { useEffect, useRef } from 'react';
+
+import Chart from 'chart.js/auto';
+import { parseCookies } from 'nookies';
+import styled from 'styled-components';
+
+import { hosts } from '@ludo.ninja/api';
+import {
+  IAuditInterest,
+  useFetchMultiversXAuditQuery,
+} from '@ludo.ninja/api/build/graphql_tools/__generated__/identityHost/schema';
+import { BlackColor, WhiteColor } from '@ludo.ninja/ui/build/styles/colors';
+import { alertVariants } from '@ludo.ninja/ui/build/system/Alert/type';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+
+import { useUiStore } from '@/store/ui';
+
+import { mediaQuery } from '@/styles/ScreenWidth';
+
+import { dmsansFontVarCss } from '@/fonts/vars';
+
+const SWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  padding: 12px 16px;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  border-radius: 6px;
+  background: ${WhiteColor};
+  margin-bottom: 16px;
+
+  .canvas {
+    width: 164px;
+    height: 164px;
+
+    ${mediaQuery.maxWidthTablet} {
+      width: 124px;
+      height: 124px;
+    }
+  }
+
+  .labels {
+    padding-top: 8px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+
+    & > * {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+
+      color: ${BlackColor};
+      font-family: ${dmsansFontVarCss.css};
+      font-size: 13px;
+      font-weight: 400;
+      line-height: 18px;
+    }
+
+    .circle {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+    }
+  }
+
+  ${mediaQuery.minWidthFourK} {
+    padding: ${adaptiveValueCalc(12)} ${adaptiveValueCalc(16)};
+    gap: ${adaptiveValueCalc(8)};
+    border-radius: ${adaptiveValueCalc(6)};
+    margin-bottom: ${adaptiveValueCalc(16)};
+
+    .canvas {
+      width: ${adaptiveValueCalc(164)};
+      height: ${adaptiveValueCalc(164)};
+    }
+
+    .labels {
+      padding-top: ${adaptiveValueCalc(8)};
+      gap: ${adaptiveValueCalc(8)};
+
+      & > * {
+        gap: ${adaptiveValueCalc(6)};
+
+        font-size: ${adaptiveValueCalc(13)};
+        line-height: ${adaptiveValueCalc(18)};
+      }
+
+      .circle {
+        width: ${adaptiveValueCalc(10)};
+        height: ${adaptiveValueCalc(10)};
+      }
+    }
+  }
+`;
+
+const colors = [
+  '#977CFF',
+  '#98E2EB',
+  '#D181FF',
+  '#8FDE95',
+  '#7BC0FF',
+  '#FB94A3',
+  '#FFAE80',
+  '#FFE380',
+  '#CFD5EA',
+];
+
+const backgroundColors = [
+  ...colors,
+  ...colors,
+  ...colors,
+  ...colors,
+  ...colors,
+  ...colors,
+  ...colors,
+  ...colors,
+  ...colors,
+  ...colors,
+];
+
+const AuditUI = ({
+  interests,
+}: {
+  interests: Array<Pick<IAuditInterest, 'name' | 'items' | 'percentage'>>;
+}) => {
+  const labels = interests.map((el) => {
+    const name = el.name;
+    if (name) {
+      return name[0].toUpperCase() + name.slice(1);
+    }
+    return name;
+  });
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const chart =
+      canvas &&
+      new Chart(canvas, {
+        type: 'doughnut',
+        data: {
+          labels,
+          datasets: [
+            {
+              data: interests.map((el) => el.percentage),
+              backgroundColor: backgroundColors,
+              hoverOffset: 4,
+            },
+          ],
+        },
+        options: {
+          responsive: true,
+          plugins: {
+            legend: {
+              display: false,
+            },
+            tooltip: {
+              callbacks: {
+                label: function (context) {
+                  return ' ' + context.raw + '%';
+                },
+              },
+            },
+          },
+        },
+      });
+    return () => {
+      if (chart && 'destroy' in chart) {
+        chart.destroy();
+      }
+    };
+  }, []);
+  return (
+    <SWrapper>
+      <div className="canvas">
+        <canvas ref={canvasRef} />
+      </div>
+      <div className="labels">
+        {labels.map((label, index) => (
+          <div key={index}>
+            <div
+              className="circle"
+              style={{
+                backgroundColor: backgroundColors[index],
+              }}
+            />
+            <span>{label}</span>
+          </div>
+        ))}
+      </div>
+    </SWrapper>
+  );
+};
+
+const Audit = ({ wallet }: { wallet: string }) => {
+  const openAlert = useUiStore((state) => state.openAlert);
+
+  const { data } = useFetchMultiversXAuditQuery({
+    variables: { wallet },
+    context: {
+      uri: hosts.identityHost,
+    },
+    notifyOnNetworkStatusChange: true,
+    fetchPolicy: 'no-cache',
+    onError: () => {
+      openAlert({
+        type: alertVariants.error,
+        caption: 'Oops, something went wrong.',
+      });
+    },
+  });
+  if (!data || !data.fetchMultiversxAudit?.interests) {
+    return null;
+  }
+  const { interests } = data.fetchMultiversxAudit;
+
+  return interests && <AuditUI interests={interests} />;
+};
+
+export const MultiversXAudit = () => {
+  const { authMultiversXWallet } = parseCookies();
+  if (!authMultiversXWallet) {
+    return null;
+  }
+  return <Audit wallet={authMultiversXWallet} />;
+  // const testWallet =
+  //   'erd138hdrk39plv3afyv0x3fcsknfu9hkdj9xu7u0mpdqmjpvt5avc7s72unc8';
+  // return <Audit wallet={testWallet} />;
+};

package/src/components/profile/ProfileTabs.tsx

@@ -0,0 +1,57 @@
+import React, { CSSProperties } from 'react';
+
+import { useRouter } from 'next/router';
+
+import LinkTabs from '@/components/linkTabs';
+import LinkTab from '@/components/linkTabs/linkTab';
+
+import { isProd } from '@/utils/env';
+
+export const ProfileTabs = ({
+  totalResults = null,
+  profileId,
+  style,
+  isMobile,
+}: {
+  totalResults?: number | null;
+  profileId: string;
+  style?: CSSProperties;
+  isMobile: boolean;
+}) => {
+  const router = useRouter();
+
+  return (
+    <LinkTabs isUnderlined style={style}>
+      {[
+        {
+          link: `/profile/${profileId}/nfts`,
+          text: 'NFTs',
+        },
+        // Todo fav-list
+        ...(isProd()
+          ? []
+          : [
+              {
+                link: `/profile/${profileId}/galleries`,
+                text: 'Galleries',
+              },
+              {
+                link: `/profile/${profileId}/favorite-lists`,
+                text: isMobile ? 'Fav.Lists' : 'Favorite Lists',
+              },
+            ]),
+      ].map(({ link, text }) => {
+        const isActive = router.asPath.includes(link);
+        return (
+          <LinkTab
+            key={link}
+            link={link}
+            isActive={isActive}
+            countItems={isActive ? totalResults : null}
+            text={text}
+          />
+        );
+      })}
+    </LinkTabs>
+  );
+};