@ludo.ninja/components 1.5.8 → 1.6.0

package/src/components/navigation/index.tsx

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

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

@@ -1,59 +0,0 @@
-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,
-  isProdENV,
-}: {
-  totalResults?: number | null;
-  profileId: string;
-  style?: CSSProperties;
-  isMobile: boolean;
-  isProdENV: string;
-}) => {
-  const router = useRouter();
-
-  return (
-    <LinkTabs isUnderlined style={style}>
-      {[
-        {
-          link: `/profile/${profileId}/nfts`,
-          text: 'NFTs',
-        },
-        // Todo fav-list
-        ...(isProd({ ENV: isProdENV })
-          ? []
-          : [
-              {
-                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>
-  );
-};