@ludo.ninja/components 1.5.8 → 1.6.0

package/dist/components/search/searchSuggestions/searchSuggestionsCaption/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    caption: string;
+    children: React.ReactNode;
+}
+declare const SearchSuggestionsCaption: React.FC<Props>;
+export default SearchSuggestionsCaption;

package/dist/components/search/searchSuggestions/searchSuggestionsCaption/index.jsx

@@ -0,0 +1,23 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { BorderColorLight, TextGrayColor } from '@/styles/colors';
+import { FH5 } from '@/styles/typography';
+// Styles
+var StyledSearchSuggestionsCaption = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 12px 0;\n  border-top: 1px solid ", ";\n  line-height: 22px;\n\n  .caption {\n    ", ";\n    color: ", ";\n    user-select: none;\n  }\n\n  :last-child {\n    border-bottom: none;\n  }\n\n  ", " {\n    &:first-child {\n      border-top: unset;\n    }\n  }\n\n  ", " {\n    padding: ", " 0;\n    border-top: ", " solid ", ";\n    line-height: ", ";\n  }\n"], ["\n  padding: 12px 0;\n  border-top: 1px solid ", ";\n  line-height: 22px;\n\n  .caption {\n    ", ";\n    color: ", ";\n    user-select: none;\n  }\n\n  :last-child {\n    border-bottom: none;\n  }\n\n  ", " {\n    &:first-child {\n      border-top: unset;\n    }\n  }\n\n  ", " {\n    padding: ", " 0;\n    border-top: ", " solid ", ";\n    line-height: ", ";\n  }\n"])), BorderColorLight, FH5, TextGrayColor, mediaQuery.mobile, mediaQuery.minWidthFourK, adaptiveValueCalc(12), adaptiveValueCalc(1), BorderColorLight, adaptiveValueCalc(22));
+// Components
+var SearchSuggestionsCaption = function (_a) {
+    var caption = _a.caption, children = _a.children;
+    return (<StyledSearchSuggestionsCaption>
+      <span className={'caption'}>{caption}</span>
+      {children}
+    </StyledSearchSuggestionsCaption>);
+};
+// Export
+export default SearchSuggestionsCaption;
+var templateObject_1;

package/dist/components/search/searchSuggestions/searchSuggestionsFooter/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SearchSuggestionsFooter: () => React.JSX.Element;
+export default SearchSuggestionsFooter;

package/dist/components/search/searchSuggestions/searchSuggestionsFooter/index.jsx

@@ -0,0 +1,26 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { BlackColor, BorderColorLight, TextGrayColor } from '@/styles/colors';
+import { TextSmall } from '@/styles/typography';
+import { dmsansFontVarCss } from '@/fonts/vars';
+// Styles
+var StyledSearchSuggestionsFooter = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .footer {\n    font-family: ", ";\n    ", ";\n    border-top: 1px solid ", ";\n    color: ", ";\n    text-align: center;\n    margin-top: auto;\n    user-select: none;\n\n    .text {\n      padding: 12px 0;\n\n      strong {\n        font-weight: 700;\n        color: ", ";\n      }\n    }\n  }\n\n  ", " {\n    //border-bottom-left-radius: ", ";\n    //border-bottom-right-radius: ", ";\n\n    .footer {\n      border-top: ", " solid ", ";\n\n      .text {\n        padding: ", " 0;\n      }\n    }\n  }\n"], ["\n  .footer {\n    font-family: ", ";\n    ", ";\n    border-top: 1px solid ", ";\n    color: ", ";\n    text-align: center;\n    margin-top: auto;\n    user-select: none;\n\n    .text {\n      padding: 12px 0;\n\n      strong {\n        font-weight: 700;\n        color: ", ";\n      }\n    }\n  }\n\n  ", " {\n    //border-bottom-left-radius: ", ";\n    //border-bottom-right-radius: ", ";\n\n    .footer {\n      border-top: ", " solid ", ";\n\n      .text {\n        padding: ", " 0;\n      }\n    }\n  }\n"])), dmsansFontVarCss.css, TextSmall, BorderColorLight, TextGrayColor, BlackColor, mediaQuery.minWidthFourK, adaptiveValueCalc(28), adaptiveValueCalc(28), adaptiveValueCalc(1), BorderColorLight, adaptiveValueCalc(12));
+// Components
+var SearchSuggestionsFooter = function () {
+    return (<StyledSearchSuggestionsFooter>
+      <div className={" footer"}>
+        <p className={'text'}>
+          Press <strong>Enter</strong> to search all results
+        </p>
+      </div>
+    </StyledSearchSuggestionsFooter>);
+};
+// Export
+export default SearchSuggestionsFooter;
+var templateObject_1;

package/dist/components/search/searchSuggestions/searchSuggestionsItem/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface Props {
+    name: string;
+    link: string;
+    imgUrl: string;
+    borderRadius?: boolean;
+    additionalHTML?: React.ReactNode;
+    searchTerm?: string;
+}
+declare const SearchSuggestionsItem: React.FC<Props>;
+export default SearchSuggestionsItem;

package/dist/components/search/searchSuggestions/searchSuggestionsItem/index.jsx

@@ -0,0 +1,42 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import Link from 'next/link';
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { searchQueryLetters } from '@ludo.ninja/utils';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { BlackColor, TextDarkGrayColor, TextGrayColor } from '@/styles/colors';
+import { FH5 } from '@/styles/typography';
+import { ImageInterceptor } from '@/system/Img/ImageInterceptor';
+// Styles
+var StyledSearchSuggestionsItem = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  user-select: none;\n\n  .link {\n    text-decoration: none;\n    display: flex;\n    padding: 6px 0;\n    border-radius: 8px;\n    gap: 8px;\n    align-items: center;\n    position: relative;\n\n    & > * {\n      position: relative;\n      z-index: 1;\n    }\n\n    img {\n      border-radius: ", ";\n      width: 32px;\n      height: 32px;\n    }\n\n    .additional {\n      white-space: nowrap;\n      ", ";\n      color: ", ";\n      margin-left: auto;\n    }\n\n    .text {\n      display: flex;\n\n      overflow: hidden;\n\n      .strong {\n        font-weight: 600;\n        color: ", ";\n        font-size: 18px;\n        line-height: 26px;\n      }\n\n      .regular {\n        ", ";\n        color: ", ";\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n    }\n\n    &:before {\n      content: '';\n      position: absolute;\n      width: calc(100% + 12px);\n      height: 100%;\n      top: 0;\n      left: -6px;\n      border-radius: 8px;\n      transition: background-color 200ms;\n    }\n\n    &:hover:before {\n      background: #ecf0fc;\n    }\n  }\n\n  ", " {\n    .link {\n      padding: ", " 0;\n      border-radius: ", ";\n      gap: ", ";\n\n      img {\n        border-radius: ", ";\n        width: ", ";\n        height: ", ";\n      }\n\n      .text {\n        .strong {\n          font-size: ", ";\n          line-height: ", ";\n        }\n      }\n\n      &:before {\n        width: calc(100% + ", ");\n        left: ", ";\n        border-radius: ", ";\n      }\n    }\n  }\n"], ["\n  user-select: none;\n\n  .link {\n    text-decoration: none;\n    display: flex;\n    padding: 6px 0;\n    border-radius: 8px;\n    gap: 8px;\n    align-items: center;\n    position: relative;\n\n    & > * {\n      position: relative;\n      z-index: 1;\n    }\n\n    img {\n      border-radius: ", ";\n      width: 32px;\n      height: 32px;\n    }\n\n    .additional {\n      white-space: nowrap;\n      ", ";\n      color: ", ";\n      margin-left: auto;\n    }\n\n    .text {\n      display: flex;\n\n      overflow: hidden;\n\n      .strong {\n        font-weight: 600;\n        color: ", ";\n        font-size: 18px;\n        line-height: 26px;\n      }\n\n      .regular {\n        ", ";\n        color: ", ";\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n    }\n\n    &:before {\n      content: '';\n      position: absolute;\n      width: calc(100% + 12px);\n      height: 100%;\n      top: 0;\n      left: -6px;\n      border-radius: 8px;\n      transition: background-color 200ms;\n    }\n\n    &:hover:before {\n      background: #ecf0fc;\n    }\n  }\n\n  ", " {\n    .link {\n      padding: ", " 0;\n      border-radius: ", ";\n      gap: ", ";\n\n      img {\n        border-radius: ", ";\n        width: ", ";\n        height: ", ";\n      }\n\n      .text {\n        .strong {\n          font-size: ", ";\n          line-height: ", ";\n        }\n      }\n\n      &:before {\n        width: calc(100% + ", ");\n        left: ", ";\n        border-radius: ", ";\n      }\n    }\n  }\n"])), function (props) { return (props.borderRadius ? '16px' : 'none'); }, FH5, TextDarkGrayColor, BlackColor, FH5, TextGrayColor, mediaQuery.minWidthFourK, adaptiveValueCalc(6), adaptiveValueCalc(8), adaptiveValueCalc(8), function (props) {
+    return props.borderRadius ? adaptiveValueCalc(16) : 'none';
+}, adaptiveValueCalc(32), adaptiveValueCalc(32), adaptiveValueCalc(18), adaptiveValueCalc(26), adaptiveValueCalc(12), adaptiveValueCalc(-6), adaptiveValueCalc(8));
+// Components
+var SearchSuggestionsItem = function (_a) {
+    var name = _a.name, link = _a.link, imgUrl = _a.imgUrl, borderRadius = _a.borderRadius, additionalHTML = _a.additionalHTML, searchTerm = _a.searchTerm;
+    return (<StyledSearchSuggestionsItem borderRadius={borderRadius}>
+    <Link href={link} className={'link'}>
+      <ImageInterceptor borderRadiusSkeleton={borderRadius && 16}>
+        <img src={imgUrl} alt={'pirate'} width={32} height={32}/>
+      </ImageInterceptor>
+
+      <div className={'text'}>
+        <p className={'regular'}>
+          {searchQueryLetters({
+            text: name,
+            searchQuery: searchTerm,
+            className: 'strong',
+        })}
+        </p>
+      </div>
+      {additionalHTML}
+    </Link>
+  </StyledSearchSuggestionsItem>);
+};
+// Export
+export default SearchSuggestionsItem;
+var templateObject_1;

package/dist/components/search/searchSuggestions/searchSuggestionsItem/searchSuggestionsItemSkeleton/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const SearchSuggestionsItemSkeleton: () => React.JSX.Element;
+export declare const SearchSuggestionsItemsSkeleton: () => React.JSX.Element;
+export default SearchSuggestionsItemSkeleton;

package/dist/components/search/searchSuggestions/searchSuggestionsItem/searchSuggestionsItemSkeleton/index.jsx

@@ -0,0 +1,33 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { InactiveButtonColor } from '@/styles/colors';
+import SearchSuggestionsCaption from '@/components/search/searchSuggestions/searchSuggestionsCaption';
+// Styles
+var StyledSearchSuggestionsItemSkeleton = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  gap: 8px;\n  height: 44px;\n  align-items: center;\n\n  & > * {\n    overflow: hidden;\n    display: flex;\n    height: 32px;\n    border-radius: 6px;\n\n    &:nth-child(1) {\n      flex: 1 32px;\n      min-width: 32px;\n      max-width: 32px;\n    }\n\n    &:nth-child(2) {\n      flex: 1 336px;\n    }\n\n    &:nth-child(3) {\n      flex: 1 65px;\n      min-width: 32px;\n    }\n  }\n\n  ", " {\n    gap: ", ";\n    height: ", ";\n\n    & > * {\n      height: ", ";\n      border-radius: ", ";\n\n      &:nth-child(1) {\n        flex: 1 ", ";\n        min-width: ", ";\n        max-width: ", ";\n      }\n\n      &:nth-child(2) {\n        flex: 1 ", ";\n      }\n\n      &:nth-child(3) {\n        flex: 1 ", ";\n        min-width: ", ";\n      }\n    }\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  gap: 8px;\n  height: 44px;\n  align-items: center;\n\n  & > * {\n    overflow: hidden;\n    display: flex;\n    height: 32px;\n    border-radius: 6px;\n\n    &:nth-child(1) {\n      flex: 1 32px;\n      min-width: 32px;\n      max-width: 32px;\n    }\n\n    &:nth-child(2) {\n      flex: 1 336px;\n    }\n\n    &:nth-child(3) {\n      flex: 1 65px;\n      min-width: 32px;\n    }\n  }\n\n  ", " {\n    gap: ", ";\n    height: ", ";\n\n    & > * {\n      height: ", ";\n      border-radius: ", ";\n\n      &:nth-child(1) {\n        flex: 1 ", ";\n        min-width: ", ";\n        max-width: ", ";\n      }\n\n      &:nth-child(2) {\n        flex: 1 ", ";\n      }\n\n      &:nth-child(3) {\n        flex: 1 ", ";\n        min-width: ", ";\n      }\n    }\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(8), adaptiveValueCalc(44), adaptiveValueCalc(32), adaptiveValueCalc(6), adaptiveValueCalc(32), adaptiveValueCalc(32), adaptiveValueCalc(32), adaptiveValueCalc(336), adaptiveValueCalc(65), adaptiveValueCalc(32));
+// Components
+var SearchSuggestionsItemSkeleton = function () { return (<StyledSearchSuggestionsItemSkeleton>
+    <SkeletonTheme baseColor={InactiveButtonColor}>
+      <Skeleton />
+      <Skeleton />
+      <Skeleton />
+    </SkeletonTheme>
+  </StyledSearchSuggestionsItemSkeleton>); };
+var SContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var SSkeleton = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  @media (min-width: 768px) {\n    max-height: calc(var(--app-height) - 124px - 50px - 24px - 10px - 24px);\n    overflow-y: auto;\n    overflow-x: hidden;\n  }\n\n  ", " {\n    max-height: calc(\n      var(--app-height) - ", " - ", " -\n        ", " - ", " -\n        ", "\n    );\n  }\n"], ["\n  @media (min-width: 768px) {\n    max-height: calc(var(--app-height) - 124px - 50px - 24px - 10px - 24px);\n    overflow-y: auto;\n    overflow-x: hidden;\n  }\n\n  ", " {\n    max-height: calc(\n      var(--app-height) - ", " - ", " -\n        ", " - ", " -\n        ", "\n    );\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(124), adaptiveValueCalc(50), adaptiveValueCalc(24), adaptiveValueCalc(10), adaptiveValueCalc(24));
+export var SearchSuggestionsItemsSkeleton = function () { return (<SSkeleton>
+    {['NFTs', 'Collections', 'Profiles'].map(function (item) { return (<SearchSuggestionsCaption key={item} caption={item}>
+        <SContainer>
+          {Array.from({ length: 3 }, function (_, index) { return (<SearchSuggestionsItemSkeleton key={index}/>); })}
+        </SContainer>
+      </SearchSuggestionsCaption>); })}
+  </SSkeleton>); };
+// Export
+export default SearchSuggestionsItemSkeleton;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/search/searchSuggestions/searchSuggestionsNotFound/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const SearchSuggestionsNotFound: ({ notFoundText, }: {
+    notFoundText: string;
+}) => React.JSX.Element;
+export default SearchSuggestionsNotFound;

package/dist/components/search/searchSuggestions/searchSuggestionsNotFound/index.jsx

@@ -0,0 +1,22 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { BorderColorLight, TextGrayColor } from '@/styles/colors';
+import { FH5 } from '@/styles/typography';
+// Styles
+var StyledSearchSuggestionsNotFound = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  color: ", ";\n  text-align: left;\n  padding-top: 12px;\n  padding-bottom: 12px;\n  border-top: 1px solid ", ";\n\n  .text {\n    padding: 24px 0 14px 0;\n  }\n\n  ", " {\n    border-top: unset;\n    padding: 0;\n  }\n\n  ", " {\n    //border-bottom-left-radius: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    border-top: ", " solid ", ";\n\n    .text {\n      padding: ", " 0 ", " 0;\n    }\n  }\n"], ["\n  ", ";\n  color: ", ";\n  text-align: left;\n  padding-top: 12px;\n  padding-bottom: 12px;\n  border-top: 1px solid ", ";\n\n  .text {\n    padding: 24px 0 14px 0;\n  }\n\n  ", " {\n    border-top: unset;\n    padding: 0;\n  }\n\n  ", " {\n    //border-bottom-left-radius: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    border-top: ", " solid ", ";\n\n    .text {\n      padding: ", " 0 ", " 0;\n    }\n  }\n"])), FH5, TextGrayColor, BorderColorLight, mediaQuery.mobile, mediaQuery.minWidthFourK, adaptiveValueCalc(28), adaptiveValueCalc(12), adaptiveValueCalc(12), adaptiveValueCalc(1), BorderColorLight, adaptiveValueCalc(24), adaptiveValueCalc(14));
+// Components
+var SearchSuggestionsNotFound = function (_a) {
+    var notFoundText = _a.notFoundText;
+    return (<StyledSearchSuggestionsNotFound>
+      <p>No results found for “{notFoundText}”</p>
+    </StyledSearchSuggestionsNotFound>);
+};
+// Export
+export default SearchSuggestionsNotFound;
+var templateObject_1;

package/dist/components/shareDialog/index.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+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;
+        };
+    };
+}
+declare const ShareDialog: ({ link, onHide, params }: IShareDialog) => import("react").JSX.Element;
+export default ShareDialog;

package/dist/components/shareDialog/index.jsx

@@ -0,0 +1,86 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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
+var STitle = styled(H1)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 24px;\n  color: ", ";\n  ", " {\n    margin-bottom: ", ";\n  }\n"], ["\n  margin-bottom: 24px;\n  color: ", ";\n  ", " {\n    margin-bottom: ", ";\n  }\n"])), BlackColor, mediaQuery.minWidthFourK, adaptiveValueCalc(24));
+var StyledShare = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  .shareButtons {\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n    row-gap: 24px;\n    column-gap: 16px;\n    margin: 0 43px 33px 43px;\n    justify-content: center;\n\n    ", " {\n      grid-template-columns: 1fr 1fr;\n      justify-items: center;\n      align-items: center;\n    }\n  }\n\n  .shareBtn {\n    width: 108px;\n    height: 64px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-direction: column;\n    cursor: pointer;\n    border: none;\n    background-color: transparent;\n\n    img {\n      width: 40px;\n      height: 40px;\n    }\n  }\n\n  ", " {\n    .shareButtons {\n      row-gap: ", ";\n      column-gap: ", ";\n      margin: 0 ", " ", "\n        ", ";\n    }\n\n    .shareBtn {\n      width: ", ";\n      height: ", ";\n\n      img {\n        width: ", ";\n        height: ", ";\n      }\n    }\n  }\n"], ["\n  .shareButtons {\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n    row-gap: 24px;\n    column-gap: 16px;\n    margin: 0 43px 33px 43px;\n    justify-content: center;\n\n    ", " {\n      grid-template-columns: 1fr 1fr;\n      justify-items: center;\n      align-items: center;\n    }\n  }\n\n  .shareBtn {\n    width: 108px;\n    height: 64px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-direction: column;\n    cursor: pointer;\n    border: none;\n    background-color: transparent;\n\n    img {\n      width: 40px;\n      height: 40px;\n    }\n  }\n\n  ", " {\n    .shareButtons {\n      row-gap: ", ";\n      column-gap: ", ";\n      margin: 0 ", " ", "\n        ", ";\n    }\n\n    .shareBtn {\n      width: ", ";\n      height: ", ";\n\n      img {\n        width: ", ";\n        height: ", ";\n      }\n    }\n  }\n"])), mediaQuery.mobile, mediaQuery.minWidthFourK, adaptiveValueCalc(24), adaptiveValueCalc(16), adaptiveValueCalc(43), adaptiveValueCalc(33), adaptiveValueCalc(43), adaptiveValueCalc(108), adaptiveValueCalc(64), adaptiveValueCalc(40), adaptiveValueCalc(40));
+var ShareDialog = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var link = _a.link, onHide = _a.onHide, params = _a.params;
+    var url = new URL(link || '');
+    url.search = '';
+    var urlWithoutGetParameters = url.toString();
+    var openAlert = useUiStore(function (state) { return state.openAlert; });
+    return (<StyledShare>
+      <Flex alignItems={'center'} justifyContent={'center'}>
+        <STitle>{'Share to...'}</STitle>
+      </Flex>
+      <div className="shareButtons">
+        <button onClick={function () {
+            onHide();
+            copyToClipboard(urlWithoutGetParameters).then(function () {
+                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={(_b = params === null || params === void 0 ? void 0 : params.email) === null || _b === void 0 ? void 0 : _b.body} separator={(_c = params === null || params === void 0 ? void 0 : params.email) === null || _c === void 0 ? void 0 : _c.separator} subject={(_d = params === null || params === void 0 ? void 0 : params.email) === null || _d === void 0 ? void 0 : _d.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={(_e = params === null || params === void 0 ? void 0 : params.telegram) === null || _e === void 0 ? void 0 : _e.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={(_f = params === null || params === void 0 ? void 0 : params.whatsapp) === null || _f === void 0 ? void 0 : _f.title} separator={(_g = params === null || params === void 0 ? void 0 : params.whatsapp) === null || _g === void 0 ? void 0 : _g.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={(_h = params === null || params === void 0 ? void 0 : params.twitter) === null || _h === void 0 ? void 0 : _h.title} via={(_j = params === null || params === void 0 ? void 0 : params.twitter) === null || _j === void 0 ? void 0 : _j.via} related={(_k = params === null || params === void 0 ? void 0 : params.twitter) === null || _k === void 0 ? void 0 : _k.related} hashtags={(_l = params === null || params === void 0 ? void 0 : params.twitter) === null || _l === void 0 ? void 0 : _l.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={(_m = params === null || params === void 0 ? void 0 : params.reddit) === null || _m === void 0 ? void 0 : _m.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={((_o = params === null || params === void 0 ? void 0 : params.facebook) === null || _o === void 0 ? void 0 : _o.quote) || 'My cool NFT'} hashtag={((_p = params === null || params === void 0 ? void 0 : params.facebook) === null || _p === void 0 ? void 0 : _p.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;
+var templateObject_1, templateObject_2;

package/dist/components/showcaseAssets/showcaseSort/data.d.ts

@@ -0,0 +1,3 @@
+import { TabsNavType } from '@/system/Tabs/TabsNav/type';
+declare const sortData: TabsNavType[];
+export { sortData };

package/dist/components/showcaseAssets/showcaseSort/data.js

@@ -0,0 +1,26 @@
+var sortData = [
+    {
+        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/dist/components/showcaseAssets/showcaseSort/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TabsNavType } from '@/system/Tabs/TabsNav/type';
+declare const ShowCaseSort: ({ activeTab, setActiveTab, data, }: {
+    activeTab: TabsNavType;
+    setActiveTab: (tab: TabsNavType) => void;
+    data: TabsNavType[];
+}) => React.JSX.Element;
+export default ShowCaseSort;

package/dist/components/showcaseAssets/showcaseSort/index.jsx

@@ -0,0 +1,25 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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';
+// Styles
+var StyledShowCaseSort = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 25px;\n  display: flex;\n  align-items: center;\n  .caption {\n    user-select: none;\n    color: ", ";\n    ", ";\n    margin-right: 32px;\n    padding-bottom: 10px;\n  }\n  .tabs {\n    ", " {\n      margin-right: 24px;\n      margin-bottom: 10px;\n      &:last-child {\n        margin-right: 0;\n      }\n    }\n  }\n"], ["\n  margin-bottom: 25px;\n  display: flex;\n  align-items: center;\n  .caption {\n    user-select: none;\n    color: ", ";\n    ", ";\n    margin-right: 32px;\n    padding-bottom: 10px;\n  }\n  .tabs {\n    ", " {\n      margin-right: 24px;\n      margin-bottom: 10px;\n      &:last-child {\n        margin-right: 0;\n      }\n    }\n  }\n"])), BlackColor, FH2, StyledTabsNavLink);
+// Component
+var ShowCaseSort = function (_a) {
+    var activeTab = _a.activeTab, setActiveTab = _a.setActiveTab, data = _a.data;
+    return (<StyledShowCaseSort>
+      <span className={"caption"}>Explore</span>
+      <div className="tabs">
+        <TabsNav activeTab={activeTab} tabsData={data} setActiveTab={setActiveTab}/>
+      </div>
+    </StyledShowCaseSort>);
+};
+// Export
+export default ShowCaseSort;
+var templateObject_1;

package/dist/components/sidebar/data.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export declare const sideBarDataForDev: ({ isAuthorized, isDarkTheme, userId, }: {
+    isAuthorized: boolean;
+    isDarkTheme: boolean;
+    userId: string;
+}) => {
+    href: string;
+    title: string;
+    icon: React.JSX.Element;
+    isExternalUrl: boolean;
+}[];
+export declare const sideBarDataForProd: ({ isAuthorized, userId, }: {
+    isAuthorized: boolean;
+    userId: string;
+}) => {
+    href: string;
+    title: string;
+    icon: React.JSX.Element;
+    isExternalUrl: boolean;
+}[];

package/dist/components/sidebar/data.jsx

@@ -0,0 +1,81 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+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 var sideBarDataForDev = function (_a) {
+    var isAuthorized = _a.isAuthorized, isDarkTheme = _a.isDarkTheme, userId = _a.userId;
+    return __spreadArray(__spreadArray([
+        {
+            href: '/',
+            title: 'Explore',
+            icon: <ExploreIcon />,
+            isExternalUrl: false,
+        }
+    ], (isAuthorized
+        ? [
+            {
+                href: "/rewards/".concat(userId),
+                title: 'Rewards',
+                icon: <RewardsIcon />,
+                isExternalUrl: false,
+            },
+            {
+                href: '/invite-codes',
+                title: 'My invites',
+                icon: <MyInvitesIcon />,
+                isExternalUrl: false,
+            },
+        ]
+        : []), true), [
+        {
+            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,
+        },
+    ], false);
+};
+export var sideBarDataForProd = function (_a) {
+    var isAuthorized = _a.isAuthorized, userId = _a.userId;
+    return __spreadArray([], (isAuthorized
+        ? [
+            {
+                href: "/rewards/".concat(userId),
+                title: 'Rewards',
+                icon: <RewardsIcon />,
+                isExternalUrl: false,
+            },
+            {
+                href: '/invite-codes',
+                title: 'My invites',
+                icon: <MyInvitesIcon />,
+                isExternalUrl: false,
+            },
+        ]
+        : []), true);
+};

package/dist/components/sidebar/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface Props {
+    isProdENV: string;
+}
+declare const Sidebar: React.FC<Props>;
+export default Sidebar;

package/dist/components/sidebar/index.jsx

@@ -0,0 +1,112 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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';
+var MenuItem = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: 15px;\n  font-weight: 500;\n  line-height: 22px;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  padding: 12px 4px;\n  text-indent: 4px;\n  border-radius: 4px;\n  cursor: pointer;\n  color: ", ";\n\n  ", " {\n    font-size: 14px;\n    line-height: 20px;\n  }\n\n  transition: background-color 0.3s ease-in-out;\n\n  @media (hover: hover) {\n    &:hover {\n      transition: background-color 0.3s ease-in;\n      background-color: ", ";\n    }\n  }\n\n  ", " {\n    font-size: ", ";\n    line-height: ", ";\n    gap: ", ";\n    padding: ", " ", ";\n    text-indent: ", ";\n    border-radius: ", ";\n    img {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"], ["\n  font-size: 15px;\n  font-weight: 500;\n  line-height: 22px;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  padding: 12px 4px;\n  text-indent: 4px;\n  border-radius: 4px;\n  cursor: pointer;\n  color: ", ";\n\n  ", " {\n    font-size: 14px;\n    line-height: 20px;\n  }\n\n  transition: background-color 0.3s ease-in-out;\n\n  @media (hover: hover) {\n    &:hover {\n      transition: background-color 0.3s ease-in;\n      background-color: ", ";\n    }\n  }\n\n  ", " {\n    font-size: ", ";\n    line-height: ", ";\n    gap: ", ";\n    padding: ", " ", ";\n    text-indent: ", ";\n    border-radius: ", ";\n    img {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.secondaryText;
+}, mediaQuery.mobile, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.secondaryBg;
+}, mediaQuery.minWidthFourK, adaptiveValueCalc(15), adaptiveValueCalc(22), adaptiveValueCalc(8), adaptiveValueCalc(12), adaptiveValueCalc(4), adaptiveValueCalc(4), adaptiveValueCalc(4), adaptiveValueCalc(20), adaptiveValueCalc(20));
+var BeforeMenuContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 12px 0;\n  border-bottom: 1px solid ", ";\n\n  ", " {\n    padding: ", " 0;\n    border-bottom: ", " solid\n      ", ";\n  }\n"], ["\n  padding: 12px 0;\n  border-bottom: 1px solid ", ";\n\n  ", " {\n    padding: ", " 0;\n    border-bottom: ", " solid\n      ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.divider;
+}, mediaQuery.minWidthFourK, adaptiveValueCalc(12), adaptiveValueCalc(1), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.divider;
+});
+var SLink = styled(Link)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  &:not(:last-child) svg path {\n    fill: ", ";\n  }\n  .icon-wrapper {\n    width: 20px;\n    height: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    ", " {\n      width: ", ";\n      height: ", ";\n      svg {\n        transform: ", ";\n      }\n    }\n  }\n"], ["\n  &:not(:last-child) svg path {\n    fill: ", ";\n  }\n  .icon-wrapper {\n    width: 20px;\n    height: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    ", " {\n      width: ", ";\n      height: ", ";\n      svg {\n        transform: ", ";\n      }\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.sidebarSvgPathFill;
+}, mediaQuery.minWidthFourK, adaptiveValueCalc(20), adaptiveValueCalc(20), function (props) {
+    return 'transform' in props.scale && props.scale.transform;
+});
+// Component
+var Sidebar = function (_a) {
+    var _b;
+    var isProdENV = _a.isProdENV;
+    var closeSidebar = useUiStore(function (state) { return state.closeSidebar; });
+    var isSidebarOpen = useUiStore(function (state) { return state.isSidebarOpen; });
+    var isAuthorized = useUserStore(function (state) { return state.isSignedIn; });
+    var getUser = useUserStore(function (state) { return state.user; });
+    var signOut = useSignOut();
+    var deviceType = useWindowDimensions().deviceType;
+    var _c = useExtension(), isExtensionInstalled = _c.isExtensionInstalled, openExtensionChromeStorePage = _c.openExtensionChromeStorePage, openExtension = _c.openExtension;
+    var _d = (_b = getUser) !== null && _b !== void 0 ? _b : [''], wallets = _d.wallets, userId = _d.userId;
+    var type = useTheme().type;
+    var isDarkTheme = type === ThemeEnum.dark;
+    // Todo fav-list
+    var sideBarData = isProd({ ENV: isProdENV })
+        ? sideBarDataForProd({ userId: userId, isAuthorized: isAuthorized })
+        : sideBarDataForDev({ userId: userId, isAuthorized: isAuthorized, isDarkTheme: isDarkTheme });
+    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
+    return (<SidebarUi closeSidebar={closeSidebar} isOpen={isSidebarOpen} handle={{
+            login: function () {
+                closeSidebar();
+                redirectToLoginWindow();
+            },
+            logout: signOut,
+        }} isAuthorized={isAuthorized} userWallets={wallets} slots={__assign({ menu: sideBarData.map(function (_a) {
+                var title = _a.title, href = _a.href, icon = _a.icon, isExternalUrl = _a.isExternalUrl;
+                return (<SLink href={href} target={isExternalUrl ? '_blank' : '_self'} onClick={closeSidebar} key={title} passHref={isExternalUrl} scale={getAdaptiveScale({ windowDimensions: windowDimensions, currentSize: 1 })}>
+            <span className="icon-wrapper">{icon}</span>
+            {title}
+          </SLink>);
+            }), userPicture: function (_a) {
+                var children = _a.children, height = _a.height, width = _a.width, isNeedBoxTransform = _a.isNeedBoxTransform;
+                return (<UserPic width={width} height={height} userId={userId} isNeedBoxTransform={isNeedBoxTransform}>
+            {children}
+          </UserPic>);
+            }, inviteCode: <SidebarInviteCodeLabel /> }, (deviceType == 'isDesktop' && isAuthorized
+            ? {
+                beforeMenu: (<BeforeMenuContainer>
+                  {isExtensionInstalled ? (<MenuItem onClick={function () {
+                            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={function () {
+                            closeSidebar();
+                            openExtensionChromeStorePage();
+                        }} text={'Install Ludo X now'} variant={'primaryM'}/>
+                    </div>)}
+                </BeforeMenuContainer>),
+            }
+            : {}))}/>);
+};
+// Export
+export default Sidebar;
+var templateObject_1, templateObject_2, templateObject_3;