@ludo.ninja/components 0.6.0 → 1.0.1

package/src/components/shareDialog/index.tsx

@@ -0,0 +1,260 @@
+import {
+  EmailShareButton,
+  FacebookShareButton, // InstapaperShareButton,
+  RedditShareButton,
+  TelegramShareButton,
+  TwitterShareButton,
+  WhatsappShareButton,
+} from 'react-share';
+import styled from 'styled-components';
+
+import { alertVariants } from '@ludo.ninja/ui/build/system/Alert/type';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { copyToClipboard } from '@ludo.ninja/utils';
+
+import { useUiStore } from '@/store/ui';
+
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { BlackColor, TextGrayColor } from '@/styles/colors';
+
+import { Flex, H1, H5 } from '@system';
+
+// import CopyIcon from '@/public/share/copy-link-btn.svg';
+// import EmailIcon from '@/public/share/email-btn.svg';
+// import FacebookIcon from '@/public/share/facebook-btn.svg';
+// import InstagramIcon from '@/public/share/insta-btn.svg';
+// import RedditIcon from '@/public/share/reddit-btn.svg';
+// import TelegramIcon from '@/public/share/telegram-btn.svg';
+// import TwitterIcon from '@/public/share/twitter-btn.svg';
+// import WatsUpIcon from '@/public/share/whatsapp-btn.svg';
+
+// Styles
+const STitle = styled(H1)`
+  margin-bottom: 24px;
+  color: ${BlackColor};
+  ${mediaQuery.minWidthFourK} {
+    margin-bottom: ${adaptiveValueCalc(24)};
+  }
+`;
+
+const StyledShare = styled.div`
+  .shareButtons {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    row-gap: 24px;
+    column-gap: 16px;
+    margin: 0 43px 33px 43px;
+    justify-content: center;
+
+    ${mediaQuery.mobile} {
+      grid-template-columns: 1fr 1fr;
+      justify-items: center;
+      align-items: center;
+    }
+  }
+
+  .shareBtn {
+    width: 108px;
+    height: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: column;
+    cursor: pointer;
+    border: none;
+    background-color: transparent;
+
+    img {
+      width: 40px;
+      height: 40px;
+    }
+  }
+
+  ${mediaQuery.minWidthFourK} {
+    .shareButtons {
+      row-gap: ${adaptiveValueCalc(24)};
+      column-gap: ${adaptiveValueCalc(16)};
+      margin: 0 ${adaptiveValueCalc(43)} ${adaptiveValueCalc(33)}
+        ${adaptiveValueCalc(43)};
+    }
+
+    .shareBtn {
+      width: ${adaptiveValueCalc(108)};
+      height: ${adaptiveValueCalc(64)};
+
+      img {
+        width: ${adaptiveValueCalc(40)};
+        height: ${adaptiveValueCalc(40)};
+      }
+    }
+  }
+`;
+
+// Components
+
+interface IShareDialog {
+  link: string | null;
+  onHide: () => void;
+  params?: {
+    email?: {
+      body?: string;
+      separator?: string;
+      subject?: string;
+    };
+    telegram?: {
+      title?: string;
+    };
+    whatsapp?: {
+      title?: string;
+      separator?: string;
+    };
+    twitter?: {
+      title?: string;
+      via?: string;
+      hashtags?: string[];
+      related?: string[];
+    };
+    reddit?: {
+      title?: string;
+    };
+    facebook?: {
+      quote?: string;
+      hashtag?: string;
+    };
+  };
+}
+
+const ShareDialog = ({ link, onHide, params }: IShareDialog) => {
+  const url = new URL(link || '');
+  url.search = '';
+
+  const urlWithoutGetParameters = url.toString();
+  const openAlert = useUiStore((state) => state.openAlert);
+
+  return (
+    <StyledShare>
+      <Flex alignItems={'center'} justifyContent={'center'}>
+        <STitle>{'Share to...'}</STitle>
+      </Flex>
+      <div className="shareButtons">
+        <button
+          onClick={() => {
+            onHide();
+            copyToClipboard(urlWithoutGetParameters).then(() => {
+              openAlert({
+                type: alertVariants.copied,
+              });
+            });
+          }}
+          className={'shareBtn'}
+        >
+          <img
+            src="/share/copy-link-btn.svg"
+            alt="share"
+            height={40}
+            width={40}
+          />
+          <H5 color={TextGrayColor}>Copy Link</H5>
+        </button>
+        <EmailShareButton
+          url={urlWithoutGetParameters}
+          body={params?.email?.body}
+          separator={params?.email?.separator}
+          subject={params?.email?.subject}
+          className="shareBtn"
+          onClick={onHide}
+        >
+          <img src="/share/email-btn.svg" alt="email" height={40} width={40} />
+          <H5 color={TextGrayColor}>Email</H5>
+        </EmailShareButton>
+        <TelegramShareButton
+          url={urlWithoutGetParameters}
+          title={params?.telegram?.title}
+          className="shareBtn"
+          onClick={onHide}
+        >
+          <img
+            src="/share/telegram-btn.svg"
+            alt="telegram"
+            height={40}
+            width={40}
+          />
+          <H5 color={TextGrayColor}>Telegram</H5>
+        </TelegramShareButton>
+        <WhatsappShareButton
+          url={urlWithoutGetParameters}
+          title={params?.whatsapp?.title}
+          separator={params?.whatsapp?.separator}
+          className="shareBtn"
+          onClick={onHide}
+        >
+          <img
+            src="/share/whatsapp-btn.svg"
+            alt="whatsapp"
+            height={40}
+            width={40}
+          />
+          <H5 color={TextGrayColor}>WhatsApp</H5>
+        </WhatsappShareButton>
+        <TwitterShareButton
+          url={urlWithoutGetParameters}
+          title={params?.twitter?.title}
+          via={params?.twitter?.via}
+          related={params?.twitter?.related}
+          hashtags={params?.twitter?.hashtags}
+          className="shareBtn"
+          onClick={onHide}
+        >
+          <img
+            src="/share/twitter-btn.svg"
+            alt="twitter"
+            width={40}
+            height={40}
+          />
+          <H5 color={TextGrayColor}>Twitter</H5>
+        </TwitterShareButton>
+        {/*<InstapaperShareButton*/}
+        {/*  url={urlWithoutGetParameters}*/}
+        {/*  className="shareBtn"*/}
+        {/*  onClick={onHide}*/}
+        {/*>*/}
+        {/*  <InstagramIcon />*/}
+        {/*  <H5 color={TextGrayColor}>Instagram</H5>*/}
+        {/*</InstapaperShareButton>*/}
+        <RedditShareButton
+          url={urlWithoutGetParameters}
+          title={params?.reddit?.title}
+          className="shareBtn"
+          onClick={onHide}
+        >
+          <img
+            src="/share/reddit-btn.svg"
+            alt="reddit"
+            width={40}
+            height={40}
+          />
+          <H5 color={TextGrayColor}>Reddit</H5>
+        </RedditShareButton>
+        <FacebookShareButton
+          url={urlWithoutGetParameters}
+          quote={params?.facebook?.quote || 'My cool NFT'}
+          hashtag={params?.facebook?.hashtag || '#ludo'}
+          className="shareBtn"
+          onClick={onHide}
+        >
+          <img
+            src="/share/facebook-btn.svg"
+            alt="facebook"
+            width={40}
+            height={40}
+          />
+          <H5 color={TextGrayColor}>Facebook</H5>
+        </FacebookShareButton>
+      </div>
+    </StyledShare>
+  );
+};
+
+// Export
+
+export default ShareDialog;

package/src/components/showcaseAssets/showcaseSort/data.ts

@@ -0,0 +1,29 @@
+import { TabsNavType } from '@/system/Tabs/TabsNav/type';
+
+const sortData: TabsNavType[] = [
+  {
+    id: Math.random(),
+    value: 'all',
+    label: 'All',
+  },
+  {
+    id: Math.random(),
+    value: 'asset',
+    label: 'NFTs',
+  },
+  {
+    id: Math.random(),
+    value: 'collection',
+    label: 'Collections',
+  },
+  // {
+  //   id: Math.random(),
+  //   label: 'Events',
+  // },
+  // {
+  //   id: Math.random(),
+  //   label: 'Apps',
+  // },
+];
+
+export { sortData };

package/src/components/showcaseAssets/showcaseSort/index.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import styled from 'styled-components';
+
+import { BlackColor } from '@/styles/colors';
+import { FH2 } from '@/styles/typography';
+
+import { StyledTabsNavLink } from '@/system/Tabs/TabNavLink';
+import TabsNav from '@/system/Tabs/TabsNav';
+import { TabsNavType } from '@/system/Tabs/TabsNav/type';
+
+// Styles
+
+const StyledShowCaseSort = styled.div`
+  margin-bottom: 25px;
+  display: flex;
+  align-items: center;
+  .caption {
+    user-select: none;
+    color: ${BlackColor};
+    ${FH2};
+    margin-right: 32px;
+    padding-bottom: 10px;
+  }
+  .tabs {
+    ${StyledTabsNavLink} {
+      margin-right: 24px;
+      margin-bottom: 10px;
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+`;
+
+// Component
+
+const ShowCaseSort = ({
+  activeTab,
+  setActiveTab,
+  data,
+}: {
+  activeTab: TabsNavType;
+  setActiveTab: (tab: TabsNavType) => void;
+  data: TabsNavType[];
+}) => {
+  return (
+    <StyledShowCaseSort>
+      <span className={`caption`}>Explore</span>
+      <div className="tabs">
+        <TabsNav
+          activeTab={activeTab}
+          tabsData={data}
+          setActiveTab={setActiveTab}
+        />
+      </div>
+    </StyledShowCaseSort>
+  );
+};
+// Export
+
+export default ShowCaseSort;

package/src/components/sidebar/data.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+
+import AboutLudoIcon from '@/public/sidebar/aboutLudo.svg';
+import AboutLudoDarkIcon from '@/public/sidebar/aboutLudoDark.svg';
+import ApiIcon from '@/public/sidebar/api.svg';
+import ExploreIcon from '@/public/sidebar/explore.svg';
+import MyInvitesIcon from '@/public/sidebar/my-invites.svg';
+import RewardsIcon from '@/public/sidebar/rewards.svg';
+import SubmitNftIcon from '@/public/sidebar/submitNft.svg';
+
+export const sideBarDataForDev = ({
+  isAuthorized,
+  isDarkTheme,
+  userId,
+}: {
+  isAuthorized: boolean;
+  isDarkTheme: boolean;
+  userId: string;
+}) => {
+  return [
+    {
+      href: '/',
+      title: 'Explore',
+      icon: <ExploreIcon />,
+      isExternalUrl: false,
+    },
+    ...(isAuthorized
+      ? [
+          {
+            href: `/rewards/${userId}`,
+            title: 'Rewards',
+            icon: <RewardsIcon />,
+            isExternalUrl: false,
+          },
+          {
+            href: '/invite-codes',
+            title: 'My invites',
+            icon: <MyInvitesIcon />,
+            isExternalUrl: false,
+          },
+        ]
+      : []),
+    {
+      href: 'https://apidocs.ludo.com/',
+      title: 'API',
+      icon: <ApiIcon />,
+      isExternalUrl: true,
+    },
+    {
+      href: '/',
+      title: 'Submit NFT',
+      icon: <SubmitNftIcon />,
+      isExternalUrl: false,
+    },
+    {
+      href: '/',
+      title: 'About Ludo',
+      icon: isDarkTheme ? <AboutLudoDarkIcon /> : <AboutLudoIcon />,
+      isExternalUrl: false,
+    },
+  ];
+};
+
+export const sideBarDataForProd = ({
+  isAuthorized,
+  userId,
+}: {
+  isAuthorized: boolean;
+  userId: string;
+}) => {
+  return [
+    ...(isAuthorized
+      ? [
+          {
+            href: `/rewards/${userId}`,
+            title: 'Rewards',
+            icon: <RewardsIcon />,
+            isExternalUrl: false,
+          },
+          {
+            href: '/invite-codes',
+            title: 'My invites',
+            icon: <MyInvitesIcon />,
+            isExternalUrl: false,
+          },
+        ]
+      : []),
+  ];
+};

package/src/components/sidebar/index.tsx

@@ -0,0 +1,218 @@
+import React from 'react';
+
+import Link from 'next/link';
+
+import styled, { useTheme } from 'styled-components';
+
+import { Sidebar as SidebarUi } from '@ludo.ninja/ui/build/components/sidebar';
+import { ThemeEnum } from '@ludo.ninja/ui/build/dto/Theme/interface';
+import MainButton from '@ludo.ninja/ui/build/system/Buttons/MainButton';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+
+import useExtension from '@/hooks/extension/useExtension';
+
+import { useSignOut } from '@/modules/user/auth/useSignOut';
+import { useUserStore } from '@/modules/user/store';
+
+import { useUiStore } from '@/store/ui';
+
+import { mediaQuery } from '@/styles/ScreenWidth';
+
+import {
+  sideBarDataForDev,
+  sideBarDataForProd,
+} from '@/components/sidebar/data';
+import SidebarInviteCodeLabel from '@/components/sidebar/sidebarInviteCodeLabel';
+
+import UserPic from '@/system/Img/Userpic';
+
+import { getAdaptiveScale } from '@/utils/adaptive/scale';
+import { redirectToLoginWindow } from '@/utils/auth';
+import { isProd } from '@/utils/env';
+import {
+  useWindowDimensions,
+  useWindowDimensionsWithServerInitial,
+} from '@/utils/screen';
+
+import { IUser } from '@/entities/user/type';
+
+const MenuItem = styled.div`
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 22px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 12px 4px;
+  text-indent: 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  color: ${({ theme }) => theme.colors.secondaryText};
+
+  ${mediaQuery.mobile} {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  transition: background-color 0.3s ease-in-out;
+
+  @media (hover: hover) {
+    &:hover {
+      transition: background-color 0.3s ease-in;
+      background-color: ${({ theme }) => theme.colors.secondaryBg};
+    }
+  }
+
+  ${mediaQuery.minWidthFourK} {
+    font-size: ${adaptiveValueCalc(15)};
+    line-height: ${adaptiveValueCalc(22)};
+    gap: ${adaptiveValueCalc(8)};
+    padding: ${adaptiveValueCalc(12)} ${adaptiveValueCalc(4)};
+    text-indent: ${adaptiveValueCalc(4)};
+    border-radius: ${adaptiveValueCalc(4)};
+    img {
+      width: ${adaptiveValueCalc(20)};
+      height: ${adaptiveValueCalc(20)};
+    }
+  }
+`;
+
+const BeforeMenuContainer = styled.div`
+  padding: 12px 0;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.divider};
+
+  ${mediaQuery.minWidthFourK} {
+    padding: ${adaptiveValueCalc(12)} 0;
+    border-bottom: ${adaptiveValueCalc(1)} solid
+      ${({ theme }) => theme.colors.divider};
+  }
+`;
+
+const SLink = styled(Link)<{
+  scale: { transform: string } | object;
+}>`
+  &:not(:last-child) svg path {
+    fill: ${({ theme }) => theme.colors.sidebarSvgPathFill};
+  }
+  .icon-wrapper {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    ${mediaQuery.minWidthFourK} {
+      width: ${adaptiveValueCalc(20)};
+      height: ${adaptiveValueCalc(20)};
+      svg {
+        transform: ${(props) =>
+          'transform' in props.scale && props.scale.transform};
+      }
+    }
+  }
+`;
+
+// Component
+const Sidebar = () => {
+  const closeSidebar = useUiStore((state) => state.closeSidebar);
+  const isSidebarOpen = useUiStore((state) => state.isSidebarOpen);
+
+  const isAuthorized = useUserStore((state) => state.isSignedIn);
+  const getUser = useUserStore((state) => state.user);
+  const signOut = useSignOut();
+  const { deviceType } = useWindowDimensions();
+  const { isExtensionInstalled, openExtensionChromeStorePage, openExtension } =
+    useExtension();
+
+  const { wallets, userId } = (getUser as IUser) ?? [''];
+
+  const { type } = useTheme();
+
+  const isDarkTheme = type === ThemeEnum.dark;
+
+  // Todo fav-list
+  const sideBarData = isProd()
+    ? sideBarDataForProd({ userId, isAuthorized })
+    : sideBarDataForDev({ userId, isAuthorized, isDarkTheme });
+  const { windowDimensions } = useWindowDimensionsWithServerInitial();
+
+  return (
+    <SidebarUi
+      closeSidebar={closeSidebar}
+      isOpen={isSidebarOpen}
+      handle={{
+        login: () => {
+          closeSidebar();
+          redirectToLoginWindow();
+        },
+        logout: signOut,
+      }}
+      isAuthorized={isAuthorized}
+      userWallets={wallets}
+      slots={{
+        menu: sideBarData.map(({ title, href, icon, isExternalUrl }) => (
+          <SLink
+            href={href}
+            target={isExternalUrl ? '_blank' : '_self'}
+            onClick={closeSidebar}
+            key={title}
+            passHref={isExternalUrl}
+            scale={getAdaptiveScale({ windowDimensions, currentSize: 1 })}
+          >
+            <span className="icon-wrapper">{icon}</span>
+            {title}
+          </SLink>
+        )),
+        userPicture: ({ children, height, width, isNeedBoxTransform }) => (
+          <UserPic
+            width={width}
+            height={height}
+            userId={userId}
+            isNeedBoxTransform={isNeedBoxTransform}
+          >
+            {children}
+          </UserPic>
+        ),
+        inviteCode: <SidebarInviteCodeLabel />,
+        ...(deviceType == 'isDesktop' && isAuthorized
+          ? {
+              beforeMenu: (
+                <BeforeMenuContainer>
+                  {isExtensionInstalled ? (
+                    <MenuItem
+                      onClick={() => {
+                        closeSidebar();
+                        openExtension();
+                      }}
+                    >
+                      <img
+                        src="/sidebar/ludoX.svg"
+                        alt="Ludo X"
+                        width={20}
+                        height={20}
+                      />
+                      Open Ludo X
+                    </MenuItem>
+                  ) : (
+                    <div style={{ padding: '12px 0' }}>
+                      <MainButton
+                        onClick={() => {
+                          closeSidebar();
+                          openExtensionChromeStorePage();
+                        }}
+                        text={'Install Ludo X now'}
+                        variant={'primaryM'}
+                      />
+                    </div>
+                  )}
+                </BeforeMenuContainer>
+              ),
+            }
+          : {}),
+      }}
+    />
+  );
+};
+
+// Export
+
+export default Sidebar;

package/src/components/sidebar/initializer.tsx

@@ -0,0 +1,6 @@
+import dynamic from 'next/dynamic';
+
+const Sidebar = dynamic(() => import('../sidebar').then((res) => res.default), {
+  ssr: false,
+});
+export const SidebarInitializer = () => <Sidebar />;