@ludo.ninja/components 1.1.6 → 1.1.8

package/dist/components/shareDialog/index.js

@@ -1,45 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 (_jsxs(StyledShare, { children: [_jsx(Flex, { alignItems: 'center', justifyContent: 'center', children: _jsx(STitle, { children: 'Share to...' }) }), _jsxs("div", { className: "shareButtons", children: [_jsxs("button", { onClick: function () {
-                            onHide();
-                            copyToClipboard(urlWithoutGetParameters).then(function () {
-                                openAlert({
-                                    type: alertVariants.copied,
-                                });
-                            });
-                        }, className: 'shareBtn', children: [_jsx("img", { src: "/share/copy-link-btn.svg", alt: "share", height: 40, width: 40 }), _jsx(H5, { color: TextGrayColor, children: "Copy Link" })] }), _jsxs(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, children: [_jsx("img", { src: "/share/email-btn.svg", alt: "email", height: 40, width: 40 }), _jsx(H5, { color: TextGrayColor, children: "Email" })] }), _jsxs(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, children: [_jsx("img", { src: "/share/telegram-btn.svg", alt: "telegram", height: 40, width: 40 }), _jsx(H5, { color: TextGrayColor, children: "Telegram" })] }), _jsxs(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, children: [_jsx("img", { src: "/share/whatsapp-btn.svg", alt: "whatsapp", height: 40, width: 40 }), _jsx(H5, { color: TextGrayColor, children: "WhatsApp" })] }), _jsxs(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, children: [_jsx("img", { src: "/share/twitter-btn.svg", alt: "twitter", width: 40, height: 40 }), _jsx(H5, { color: TextGrayColor, children: "Twitter" })] }), _jsxs(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, children: [_jsx("img", { src: "/share/reddit-btn.svg", alt: "reddit", width: 40, height: 40 }), _jsx(H5, { color: TextGrayColor, children: "Reddit" })] }), _jsxs(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, children: [_jsx("img", { src: "/share/facebook-btn.svg", alt: "facebook", width: 40, height: 40 }), _jsx(H5, { color: TextGrayColor, children: "Facebook" })] })] })] }));
-};
-// Export
-export default ShareDialog;
-var templateObject_1, templateObject_2;

package/dist/components/shareDialog/index.jsx

@@ -1,86 +0,0 @@
-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.js

@@ -1,26 +0,0 @@
-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.js

@@ -1,20 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 (_jsxs(StyledShowCaseSort, { children: [_jsx("span", { className: "caption", children: "Explore" }), _jsx("div", { className: "tabs", children: _jsx(TabsNav, { activeTab: activeTab, tabsData: data, setActiveTab: setActiveTab }) })] }));
-};
-// Export
-export default ShowCaseSort;
-var templateObject_1;

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

@@ -1,25 +0,0 @@
-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.js

@@ -1,81 +0,0 @@
-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 { jsx as _jsx } from "react/jsx-runtime";
-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: _jsx(ExploreIcon, {}),
-            isExternalUrl: false,
-        }
-    ], (isAuthorized
-        ? [
-            {
-                href: "/rewards/".concat(userId),
-                title: 'Rewards',
-                icon: _jsx(RewardsIcon, {}),
-                isExternalUrl: false,
-            },
-            {
-                href: '/invite-codes',
-                title: 'My invites',
-                icon: _jsx(MyInvitesIcon, {}),
-                isExternalUrl: false,
-            },
-        ]
-        : []), true), [
-        {
-            href: 'https://apidocs.ludo.com/',
-            title: 'API',
-            icon: _jsx(ApiIcon, {}),
-            isExternalUrl: true,
-        },
-        {
-            href: '/',
-            title: 'Submit NFT',
-            icon: _jsx(SubmitNftIcon, {}),
-            isExternalUrl: false,
-        },
-        {
-            href: '/',
-            title: 'About Ludo',
-            icon: isDarkTheme ? _jsx(AboutLudoDarkIcon, {}) : _jsx(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: _jsx(RewardsIcon, {}),
-                isExternalUrl: false,
-            },
-            {
-                href: '/invite-codes',
-                title: 'My invites',
-                icon: _jsx(MyInvitesIcon, {}),
-                isExternalUrl: false,
-            },
-        ]
-        : []), true);
-};

package/dist/components/sidebar/data.jsx

@@ -1,102 +0,0 @@
-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';
-
-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));
-  };
-
-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.js

@@ -1,99 +0,0 @@
-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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 () {
-    var _a;
-    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 _b = useExtension(), isExtensionInstalled = _b.isExtensionInstalled, openExtensionChromeStorePage = _b.openExtensionChromeStorePage, openExtension = _b.openExtension;
-    var _c = (_a = getUser) !== null && _a !== void 0 ? _a : [''], wallets = _c.wallets, userId = _c.userId;
-    var type = useTheme().type;
-    var isDarkTheme = type === ThemeEnum.dark;
-    // Todo fav-list
-    var sideBarData = isProd()
-        ? sideBarDataForProd({ userId: userId, isAuthorized: isAuthorized })
-        : sideBarDataForDev({ userId: userId, isAuthorized: isAuthorized, isDarkTheme: isDarkTheme });
-    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
-    return (_jsx(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 (_jsxs(SLink, { href: href, target: isExternalUrl ? '_blank' : '_self', onClick: closeSidebar, passHref: isExternalUrl, scale: getAdaptiveScale({ windowDimensions: windowDimensions, currentSize: 1 }), children: [_jsx("span", { className: "icon-wrapper", children: icon }), title] }, title));
-            }), userPicture: function (_a) {
-                var children = _a.children, height = _a.height, width = _a.width, isNeedBoxTransform = _a.isNeedBoxTransform;
-                return (_jsx(UserPic, { width: width, height: height, userId: userId, isNeedBoxTransform: isNeedBoxTransform, children: children }));
-            }, inviteCode: _jsx(SidebarInviteCodeLabel, {}) }, (deviceType == 'isDesktop' && isAuthorized
-            ? {
-                beforeMenu: (_jsx(BeforeMenuContainer, { children: isExtensionInstalled ? (_jsxs(MenuItem, { onClick: function () {
-                            closeSidebar();
-                            openExtension();
-                        }, children: [_jsx("img", { src: "/sidebar/ludoX.svg", alt: "Ludo X", width: 20, height: 20 }), "Open Ludo X"] })) : (_jsx("div", { style: { padding: '12px 0' }, children: _jsx(MainButton, { onClick: function () {
-                                closeSidebar();
-                                openExtensionChromeStorePage();
-                            }, text: 'Install Ludo X now', variant: 'primaryM' }) })) })),
-            }
-            : {})) }));
-};
-// Export
-export default Sidebar;
-var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/sidebar/index.jsx

@@ -1,111 +0,0 @@
-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 () {
-    var _a;
-    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 _b = useExtension(), isExtensionInstalled = _b.isExtensionInstalled, openExtensionChromeStorePage = _b.openExtensionChromeStorePage, openExtension = _b.openExtension;
-    var _c = (_a = getUser) !== null && _a !== void 0 ? _a : [''], wallets = _c.wallets, userId = _c.userId;
-    var type = useTheme().type;
-    var isDarkTheme = type === ThemeEnum.dark;
-    // Todo fav-list
-    var sideBarData = isProd()
-        ? 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;

package/dist/components/sidebar/initializer.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import dynamic from 'next/dynamic';
-var Sidebar = dynamic(function () { return import('../sidebar').then(function (res) { return res.default; }); }, {
-    ssr: false,
-});
-export var SidebarInitializer = function () { return _jsx(Sidebar, {}); };

package/dist/components/sidebar/initializer.jsx

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