@ludo.ninja/components 2.3.36 → 2.3.38

package/build/components/searchFiltersConnector/index.js

@@ -0,0 +1,116 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSearchFiltersConnector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const filters_1 = __importDefault(require("./filters"));
+const fetchSearchResultSelections_1 = require("../../api/server-preferences/queries/fetchSearchResultSelections");
+const router_1 = require("next/router");
+const react_1 = require("react");
+const useSearchFiltersConnector = function ({ defaults, isDisabledTypeFilters, isMobile, }) {
+    const defaultCopyWithoutTerm = {
+        time: defaults.time,
+        blockchain: defaults.blockchain,
+        category: defaults.category,
+        status: defaults.status,
+        ...("type" in defaults
+            ? {
+                type: defaults.type,
+            }
+            : {}),
+    };
+    const { searchResultSelections } = (0, fetchSearchResultSelections_1.useFetchSearchResultSelections)();
+    const [filterInput, setFilterInput] = (0, react_1.useState)(defaultCopyWithoutTerm);
+    const router = (0, router_1.useRouter)();
+    (0, react_1.useEffect)(() => {
+        router.replace({
+            query: {
+                ...router.query,
+                ...defaultCopyWithoutTerm,
+            },
+        }, undefined, { shallow: true });
+    }, []);
+    const handleFilterInput = async (fieldName, fieldValue) => {
+        await router.replace({
+            query: { ...router.query, [fieldName]: fieldValue },
+        }, undefined, { shallow: true });
+        setFilterInput((prevFilters) => ({
+            ...prevFilters,
+            [fieldName]: fieldValue,
+        }));
+    };
+    const handleMobileFilterInput = async (newFilters) => {
+        await router.replace({
+            query: { ...router.query, ...newFilters },
+        }, undefined, { shallow: true });
+        setFilterInput((prevFilters) => ({
+            ...prevFilters,
+            ...newFilters,
+        }));
+    };
+    const handleResetFilter = () => {
+        if (searchResultSelections) {
+            const filterInitialStateNft = {
+                ...(isDisabledTypeFilters ? {} : { type: searchResultSelections.typeSelections[0]?.id }),
+                time: searchResultSelections.timeSelections[0]?.id,
+                blockchain: searchResultSelections.blockchainSelections[0]?.id,
+                category: searchResultSelections.categorySelections[0]?.id,
+                status: searchResultSelections.statusSelections[0]?.id,
+            };
+            setFilterInput(filterInitialStateNft);
+            router.replace({
+                query: {
+                    ...router.query,
+                    ...filterInitialStateNft,
+                },
+            }, undefined, { shallow: true });
+        }
+    };
+    return {
+        filterInput,
+        renderFilters: !!(filterInput.time || filterInput.status || filterInput.category || filterInput.blockchain) ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: searchResultSelections && ((0, jsx_runtime_1.jsx)(filters_1.default, { filterInput: filterInput, selectData: [
+                    // ...(!isDisabledTypeFilters
+                    //   ? [
+                    //       {
+                    //         id: 1,
+                    //         data: {
+                    //           selectName: 'type',
+                    //           selectOptions: searchResultSelections.typeSelections,
+                    //         },
+                    //       },
+                    //     ]
+                    //   : []),
+                    {
+                        id: 2,
+                        data: {
+                            selectName: "blockchain",
+                            selectOptions: searchResultSelections.blockchainSelections,
+                        },
+                    },
+                    {
+                        id: 3,
+                        data: {
+                            selectName: "category",
+                            selectOptions: searchResultSelections.categorySelections,
+                        },
+                    },
+                    // {
+                    //   id: 4,
+                    //   data: {
+                    //     selectName: 'time',
+                    //     selectOptions: searchResultSelections.timeSelections,
+                    //   },
+                    // },
+                    // {
+                    //   id: 5,
+                    //   data: {
+                    //     selectName: 'status',
+                    //     selectOptions: searchResultSelections.statusSelections,
+                    //   },
+                    // },
+                ], filterInputHandler: handleFilterInput, handleResetFilter: handleResetFilter, handleMobileFilterInput: handleMobileFilterInput, isMobile: isMobile })) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})),
+    };
+};
+exports.useSearchFiltersConnector = useSearchFiltersConnector;

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

@@ -0,0 +1,34 @@
+interface IShareDialog {
+    shareMyProfileLink?: string;
+    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, shareMyProfileLink }: IShareDialog) => import("react/jsx-runtime").JSX.Element;
+export default ShareDialog;

package/build/components/shareDialog/index.js

@@ -0,0 +1,92 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ui_1 = require("../../store/ui");
+const ScreenWidth_1 = require("../../styles/ScreenWidth");
+const colors_1 = require("../../styles/colors");
+const index_1 = require("../../system/index");
+const constants_1 = require("@ludo.ninja/core/build/constants");
+const type_1 = require("@ludo.ninja/ui/build/system/Alert/type");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const utils_1 = require("@ludo.ninja/utils");
+const react_share_1 = require("react-share");
+const styled_components_1 = __importDefault(require("styled-components"));
+// Styles
+const STitle = (0, styled_components_1.default)(index_1.H1) `
+  margin-bottom: 24px;
+  color: ${colors_1.BlackColor};
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    margin-bottom: ${(0, _4k_1.adaptiveValueCalc)(24)};
+  }
+`;
+const StyledShare = styled_components_1.default.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;
+
+    ${ScreenWidth_1.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;
+    }
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    .shareButtons {
+      row-gap: ${(0, _4k_1.adaptiveValueCalc)(24)};
+      column-gap: ${(0, _4k_1.adaptiveValueCalc)(16)};
+      margin: 0 ${(0, _4k_1.adaptiveValueCalc)(43)} ${(0, _4k_1.adaptiveValueCalc)(33)} ${(0, _4k_1.adaptiveValueCalc)(43)};
+    }
+
+    .shareBtn {
+      width: ${(0, _4k_1.adaptiveValueCalc)(108)};
+      height: ${(0, _4k_1.adaptiveValueCalc)(64)};
+
+      img {
+        width: ${(0, _4k_1.adaptiveValueCalc)(40)};
+        height: ${(0, _4k_1.adaptiveValueCalc)(40)};
+      }
+    }
+  }
+`;
+const ShareDialog = ({ link, onHide, params, shareMyProfileLink }) => {
+    const url = new URL(link || "");
+    url.search = "";
+    const urlWithoutGetParameters = shareMyProfileLink || url.toString();
+    const openAlert = (0, ui_1.useUiStore)((state) => state.openAlert);
+    return ((0, jsx_runtime_1.jsxs)(StyledShare, { children: [(0, jsx_runtime_1.jsx)(index_1.Flex, { alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(STitle, { children: "Share to..." }) }), (0, jsx_runtime_1.jsxs)("div", { className: "shareButtons", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => {
+                            onHide();
+                            (0, utils_1.copyToClipboard)(urlWithoutGetParameters).then(() => {
+                                openAlert({
+                                    type: type_1.alertVariants.copied,
+                                });
+                            });
+                        }, className: "shareBtn", children: [(0, jsx_runtime_1.jsx)("img", { src: `${constants_1.staticLink}/public/share/copy-link-btn.svg`, alt: "share", height: 40, width: 40 }), (0, jsx_runtime_1.jsx)(index_1.H5, { color: colors_1.TextGrayColor, children: "Copy Link" })] }), (0, jsx_runtime_1.jsxs)(react_share_1.EmailShareButton, { url: urlWithoutGetParameters, body: params?.email?.body, separator: params?.email?.separator, subject: params?.email?.subject, className: "shareBtn", onClick: onHide, children: [(0, jsx_runtime_1.jsx)("img", { src: `${constants_1.staticLink}/public/share/email-btn.svg`, alt: "email", height: 40, width: 40 }), (0, jsx_runtime_1.jsx)(index_1.H5, { color: colors_1.TextGrayColor, children: "Email" })] }), (0, jsx_runtime_1.jsxs)(react_share_1.TelegramShareButton, { url: urlWithoutGetParameters, title: params?.telegram?.title, className: "shareBtn", onClick: onHide, children: [(0, jsx_runtime_1.jsx)("img", { src: `${constants_1.staticLink}/public/share/telegram-btn.svg`, alt: "telegram", height: 40, width: 40 }), (0, jsx_runtime_1.jsx)(index_1.H5, { color: colors_1.TextGrayColor, children: "Telegram" })] }), (0, jsx_runtime_1.jsxs)(react_share_1.WhatsappShareButton, { url: urlWithoutGetParameters, title: params?.whatsapp?.title, separator: params?.whatsapp?.separator, className: "shareBtn", onClick: onHide, children: [(0, jsx_runtime_1.jsx)("img", { src: `${constants_1.staticLink}/public/share/whatsapp-btn.svg`, alt: "whatsapp", height: 40, width: 40 }), (0, jsx_runtime_1.jsx)(index_1.H5, { color: colors_1.TextGrayColor, children: "WhatsApp" })] }), (0, jsx_runtime_1.jsxs)(react_share_1.TwitterShareButton, { url: urlWithoutGetParameters, title: params?.twitter?.title, via: params?.twitter?.via, related: params?.twitter?.related, hashtags: params?.twitter?.hashtags, className: "shareBtn", onClick: onHide, children: [(0, jsx_runtime_1.jsx)("img", { src: `${constants_1.staticLink}/public/share/twitter-btn.svg`, alt: "twitter", width: 40, height: 40 }), (0, jsx_runtime_1.jsx)(index_1.H5, { color: colors_1.TextGrayColor, children: "Twitter" })] }), (0, jsx_runtime_1.jsxs)(react_share_1.RedditShareButton, { url: urlWithoutGetParameters, title: params?.reddit?.title, className: "shareBtn", onClick: onHide, children: [(0, jsx_runtime_1.jsx)("img", { src: `${constants_1.staticLink}/public/share/reddit-btn.svg`, alt: "reddit", width: 40, height: 40 }), (0, jsx_runtime_1.jsx)(index_1.H5, { color: colors_1.TextGrayColor, children: "Reddit" })] }), (0, jsx_runtime_1.jsxs)(react_share_1.FacebookShareButton, { url: urlWithoutGetParameters, quote: params?.facebook?.quote || "My cool NFT", hashtag: params?.facebook?.hashtag || "#ludo", className: "shareBtn", onClick: onHide, children: [(0, jsx_runtime_1.jsx)("img", { src: `${constants_1.staticLink}/public/share/facebook-btn.svg`, alt: "facebook", width: 40, height: 40 }), (0, jsx_runtime_1.jsx)(index_1.H5, { color: colors_1.TextGrayColor, children: "Facebook" })] })] })] }));
+};
+// Export
+exports.default = ShareDialog;

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

@@ -0,0 +1,6 @@
+export declare const useSidebarData: () => {
+    href: string;
+    title: string;
+    icon: import("react/jsx-runtime").JSX.Element;
+    isExternalUrl: boolean;
+}[];

package/build/components/sidebar/data.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSidebarData = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("./icons");
+const store_1 = require("../../modules/user/store");
+const env_1 = require("../../store/env");
+const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
+const interface_1 = require("@ludo.ninja/ui/build/dto/Theme/interface");
+const styled_components_1 = require("styled-components");
+const useSidebarData = () => {
+    const { isAuthorized, userId } = (0, store_1.useUserStore)((state) => ({
+        isAuthorized: state.isSignedIn,
+        userId: state.user?.userId,
+    }));
+    const { NEXT_PUBLIC_ENV_VALUE, isProd } = (0, env_1.useEnvStore)((state) => ({
+        NEXT_PUBLIC_ENV_VALUE: state.NEXT_PUBLIC_ENV_VALUE,
+        isProd: state.isProd,
+    }));
+    const { type } = (0, styled_components_1.useTheme)();
+    const isDarkTheme = type === interface_1.ThemeEnum.dark;
+    if (!isProd()) {
+        return [
+            {
+                href: ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["app"],
+                title: "Explore",
+                icon: (0, jsx_runtime_1.jsx)(icons_1.ExploreIcon, {}),
+                isExternalUrl: false,
+            },
+            {
+                href: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["app"]}/trends`,
+                title: "Trends",
+                icon: (0, jsx_runtime_1.jsx)(icons_1.LeaderboardsIcon, {}),
+                isExternalUrl: false,
+            },
+            ...(isAuthorized
+                ? [
+                    {
+                        href: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["app"]}/rewards/${userId}`,
+                        title: "Rewards",
+                        icon: (0, jsx_runtime_1.jsx)(icons_1.RewardsIcon, {}),
+                        isExternalUrl: false,
+                    },
+                    // {
+                    //   href: `${ludoDomains[NEXT_PUBLIC_ENV_VALUE as TEnvValue]["app"]}/trends`,
+                    //   title: "Trends",
+                    //   icon: <LeaderboardsIcon />,
+                    //   isExternalUrl: false,
+                    // },
+                    {
+                        href: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["account"]}/referrals`,
+                        title: "Referral Dashboard",
+                        icon: (0, jsx_runtime_1.jsx)(icons_1.ReferralDashboardIcon, {}),
+                        isExternalUrl: false,
+                    },
+                    {
+                        href: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["app"]}/invite-codes`,
+                        title: "My invites",
+                        icon: (0, jsx_runtime_1.jsx)(icons_1.MyInvitesIcon, {}),
+                        isExternalUrl: false,
+                    },
+                ]
+                : []),
+            {
+                href: "https://apidocs.ludo.com/",
+                title: "API",
+                icon: (0, jsx_runtime_1.jsx)(icons_1.ApiIcon, {}),
+                isExternalUrl: true,
+            },
+            {
+                href: ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["app"],
+                title: "Submit NFT",
+                icon: (0, jsx_runtime_1.jsx)(icons_1.SubmitNftIcon, {}),
+                isExternalUrl: false,
+            },
+            {
+                href: ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["app"],
+                title: "About Ludo",
+                icon: isDarkTheme ? (0, jsx_runtime_1.jsx)(icons_1.AboutLudoDarkIcon, {}) : (0, jsx_runtime_1.jsx)(icons_1.AboutLudoIcon, {}),
+                isExternalUrl: false,
+            },
+        ];
+    }
+    return [
+        // {
+        //   href: `${ludoDomains[NEXT_PUBLIC_ENV_VALUE as TEnvValue]["app"]}/leaderboards`,
+        //   title: "Leaderboards",
+        //   icon: <LeaderboardsIcon />,
+        //   isExternalUrl: false,
+        // },
+        ...(isAuthorized
+            ? [
+                {
+                    href: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["app"]}/rewards/${userId}`,
+                    title: "Rewards",
+                    icon: (0, jsx_runtime_1.jsx)(icons_1.RewardsIcon, {}),
+                    isExternalUrl: false,
+                },
+                // {
+                //   href: `${ludoDomains[NEXT_PUBLIC_ENV_VALUE as TEnvValue]["app"]}/leaderboards`,
+                //   title: "Leaderboards",
+                //   icon: <LeaderboardsIcon />,
+                //   isExternalUrl: false,
+                // },
+                {
+                    href: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["account"]}/referrals`,
+                    title: "Referral Dashboard",
+                    icon: (0, jsx_runtime_1.jsx)(icons_1.ReferralDashboardIcon, {}),
+                    isExternalUrl: false,
+                },
+                {
+                    href: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["app"]}/invite-codes`,
+                    title: "My invites",
+                    icon: (0, jsx_runtime_1.jsx)(icons_1.MyInvitesIcon, {}),
+                    isExternalUrl: false,
+                },
+            ]
+            : []),
+    ];
+};
+exports.useSidebarData = useSidebarData;

package/build/components/sidebar/icons.d.ts

@@ -0,0 +1,9 @@
+export declare const AboutLudoIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const AboutLudoDarkIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const ApiIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const ExploreIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const MyInvitesIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const RewardsIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const LeaderboardsIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const ReferralDashboardIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const SubmitNftIcon: () => import("react/jsx-runtime").JSX.Element;

package/build/components/sidebar/icons.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubmitNftIcon = exports.ReferralDashboardIcon = exports.LeaderboardsIcon = exports.RewardsIcon = exports.MyInvitesIcon = exports.ExploreIcon = exports.ApiIcon = exports.AboutLudoDarkIcon = exports.AboutLudoIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AboutLudoIcon = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M3.17457 7.31904C4.09143 6.47859 5.2375 5.65724 6.51729 4.93139C7.75887 4.22465 9.01955 3.65161 10.1847 3.28869C9.7836 2.37183 9.28696 1.74149 8.67572 1.55047C5.82964 1.24485 3.74761 2.31452 2.50603 5.1033C2.0094 6.19207 1.68468 7.62466 1.57007 9.15276C1.95209 8.56062 2.48693 7.94939 3.17457 7.31904Z", fill: "url(#paint0_linear_14706_23755)" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.3948 3.84277C9.24876 4.2057 8.00718 4.75963 6.8038 5.44728C5.58133 6.15402 4.45435 6.95627 3.5757 7.75852C2.73524 8.52257 2.124 9.30572 1.79928 9.97427C1.64647 10.3181 1.57007 10.6237 1.57007 10.9102C1.64647 12.2664 1.95209 13.6417 2.50603 14.8833C2.35322 14.1383 2.79255 13.2024 3.633 12.2282C4.28244 11.4833 5.142 10.7192 6.15436 9.97427C6.89931 9.42033 7.70156 8.9046 8.54202 8.40797C9.38247 7.91133 10.242 7.47201 11.1016 7.10908C10.9488 5.90571 10.7196 4.75963 10.3948 3.84277Z", fill: "url(#paint1_linear_14706_23755)" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.261 16.7545C9.07676 16.3725 7.79698 15.7995 6.51719 15.0545C5.27561 14.3287 4.14864 13.5264 3.26999 12.7051C2.65875 13.5073 2.37223 14.2523 2.50594 14.8826C3.67111 17.4995 5.63854 18.7602 8.67563 18.4545C9.85991 18.3399 11.2734 17.9006 12.6487 17.2321C11.9419 17.1939 11.1397 17.0411 10.261 16.7545Z", fill: "url(#paint2_linear_14706_23755)" }), (0, jsx_runtime_1.jsx)("path", { d: "M3.63257 12.247C4.51122 13.0492 5.6191 13.8515 6.82247 14.5582C8.04495 15.265 9.30563 15.838 10.4326 16.2009C11.5214 16.5448 12.4955 16.6785 13.2405 16.6403C13.6225 16.6021 13.909 16.5066 14.1573 16.3729C15.2843 15.6279 16.3349 14.6728 17.1371 13.5841C16.5641 14.0807 15.5326 14.1762 14.272 13.9279C13.2978 13.7369 12.209 13.374 11.0629 12.8773C10.2034 12.5144 9.36294 12.0751 8.50338 11.5976C7.64383 11.12 6.84157 10.5852 6.09663 10.0312C5.14157 10.738 4.26291 11.502 3.63257 12.247Z", fill: "url(#paint3_linear_14706_23755)" }), (0, jsx_runtime_1.jsx)("path", { d: "M14.8836 5.90549C15.151 7.12797 15.2847 8.52235 15.2847 9.99315C15.2847 11.4257 15.151 12.801 14.8644 13.9853C15.8577 14.0999 16.66 13.9853 17.1184 13.546C18.7993 11.2347 18.9139 8.90438 17.1184 6.42122C16.4307 5.44706 15.342 4.45379 14.0813 3.59424C14.4251 4.22458 14.6925 5.00773 14.8836 5.90549Z", fill: "url(#paint4_linear_14706_23755)" }), (0, jsx_runtime_1.jsx)("path", { d: "M14.2913 13.9088C14.5587 12.7436 14.6924 11.3874 14.6924 9.99304C14.6924 8.57954 14.5587 7.20426 14.3104 6.03908C14.0621 4.93121 13.6992 4.01435 13.2789 3.38401C13.0497 3.07839 12.8396 2.86828 12.5913 2.71547C11.3688 2.12333 10.0317 1.684 8.67554 1.55029C9.40138 1.79861 9.99352 2.63906 10.4137 3.86154C10.7385 4.7975 10.9677 5.92447 11.1014 7.16605C11.216 8.08291 11.2542 9.03797 11.2733 10.0121C11.2924 10.9863 11.2351 11.9605 11.1205 12.8773C12.2284 13.3549 13.3362 13.7178 14.2913 13.9088Z", fill: "url(#paint5_linear_14706_23755)" }), (0, jsx_runtime_1.jsxs)("defs", { children: [(0, jsx_runtime_1.jsxs)("linearGradient", { id: "paint0_linear_14706_23755", x1: "9.63955", y1: "2.16972", x2: "3.4464", y2: "5.568", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#B0B2C0", stopOpacity: "0.6" }), (0, jsx_runtime_1.jsx)("stop", { offset: "0.0444639", stopColor: "#B0B2C0", stopOpacity: "0.6178" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#B0B2C0" })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: "paint1_linear_14706_23755", x1: "11.8572", y1: "6.21142", x2: "5.66409", y2: "9.60972", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#B0B2C0", stopOpacity: "0.6" }), (0, jsx_runtime_1.jsx)("stop", { offset: "0.0444639", stopColor: "#B0B2C0", stopOpacity: "0.6178" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#B0B2C0" })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: "paint2_linear_14706_23755", x1: "2.56028", y1: "13.7384", x2: "8.59976", y2: "17.4025", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#B0B2C0", stopOpacity: "0.6" }), (0, jsx_runtime_1.jsx)("stop", { offset: "0.0444639", stopColor: "#B0B2C0", stopOpacity: "0.6178" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#B0B2C0" })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: "paint3_linear_14706_23755", x1: "4.95109", y1: "9.79742", x2: "10.9906", y2: "13.4615", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#B0B2C0", stopOpacity: "0.6" }), (0, jsx_runtime_1.jsx)("stop", { offset: "0.0444639", stopColor: "#B0B2C0", stopOpacity: "0.6178" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#B0B2C0" })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: "paint4_linear_14706_23755", x1: "16.1191", y1: "14.0851", x2: "16.2727", y2: "7.02267", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#B0B2C0", stopOpacity: "0.6" }), (0, jsx_runtime_1.jsx)("stop", { offset: "0.0444639", stopColor: "#B0B2C0", stopOpacity: "0.6178" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#B0B2C0" })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: "paint5_linear_14706_23755", x1: "11.5101", y1: "13.9847", x2: "11.6638", y2: "6.92228", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#B0B2C0", stopOpacity: "0.6" }), (0, jsx_runtime_1.jsx)("stop", { offset: "0.0444639", stopColor: "#B0B2C0", stopOpacity: "0.6178" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#B0B2C0" })] })] })] }));
+exports.AboutLudoIcon = AboutLudoIcon;
+const AboutLudoDarkIcon = () => ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [(0, jsx_runtime_1.jsx)("path", { d: "M2.17482 6.31904C3.09167 5.47859 4.23775 4.65724 5.51753 3.93139C6.75911 3.22465 8.01979 2.65161 9.18497 2.28869C8.78384 1.37183 8.28721 0.741487 7.67597 0.550475C4.82989 0.244855 2.74785 1.31452 1.50627 4.1033C1.00964 5.19207 0.68492 6.62466 0.570312 8.15276C0.952337 7.56062 1.48717 6.94939 2.17482 6.31904Z", fill: "url(#paint0_linear_14814_7891)" }), (0, jsx_runtime_1.jsx)("path", { d: "M9.39508 2.84277C8.24901 3.2057 7.00743 3.75963 5.80405 4.44728C4.58157 5.15402 3.4546 5.95627 2.57594 6.75852C1.73549 7.52257 1.12425 8.30572 0.799527 8.97427C0.646717 9.31809 0.570312 9.62371 0.570312 9.91023C0.646717 11.2664 0.952337 12.6417 1.50627 13.8833C1.35346 13.1383 1.79279 12.2024 2.63324 11.2282C3.28269 10.4833 4.14224 9.71922 5.15461 8.97427C5.89956 8.42033 6.70181 7.9046 7.54226 7.40797C8.38271 6.91133 9.24227 6.47201 10.1018 6.10908C9.94902 4.90571 9.7198 3.75963 9.39508 2.84277Z", fill: "url(#paint1_linear_14814_7891)" }), (0, jsx_runtime_1.jsx)("path", { d: "M9.26201 15.7545C8.07773 15.3725 6.79795 14.7995 5.51817 14.0545C4.27659 13.3287 3.14962 12.5264 2.27096 11.7051C1.65972 12.5073 1.3732 13.2523 1.50691 13.8826C2.67209 16.4995 4.63951 17.7602 7.67661 17.4545C8.86088 17.3399 10.2744 16.9006 11.6497 16.2321C10.9429 16.1939 10.1407 16.0411 9.26201 15.7545Z", fill: "url(#paint2_linear_14814_7891)" }), (0, jsx_runtime_1.jsx)("path", { d: "M2.63281 11.247C3.51147 12.0492 4.61934 12.8515 5.82272 13.5582C7.0452 14.265 8.30588 14.838 9.43285 15.2009C10.5216 15.5448 11.4958 15.6785 12.2407 15.6403C12.6228 15.6021 12.9093 15.5066 13.1576 15.3729C14.2846 14.6279 15.3351 13.6728 16.1374 12.5841C15.5643 13.0807 14.5329 13.1762 13.2722 12.9279C12.298 12.7369 11.2093 12.374 10.0632 11.8773C9.20364 11.5144 8.36318 11.0751 7.50363 10.5976C6.64407 10.12 5.84182 9.58519 5.09687 9.03125C4.14181 9.738 3.26315 10.502 2.63281 11.247Z", fill: "url(#paint3_linear_14814_7891)" }), (0, jsx_runtime_1.jsx)("path", { d: "M13.8843 4.90549C14.1517 6.12797 14.2854 7.52235 14.2854 8.99315C14.2854 10.4257 14.1517 11.801 13.8652 12.9853C14.8584 13.0999 15.6607 12.9853 16.1191 12.546C17.8 10.2347 17.9146 7.90438 16.1191 5.42122C15.4315 4.44706 14.3427 3.45379 13.082 2.59424C13.4259 3.22458 13.6933 4.00773 13.8843 4.90549Z", fill: "url(#paint4_linear_14814_7891)" }), (0, jsx_runtime_1.jsx)("path", { d: "M13.2915 12.9088C13.559 11.7436 13.6927 10.3874 13.6927 8.99304C13.6927 7.57954 13.559 6.20426 13.3106 5.03908C13.0623 3.93121 12.6994 3.01435 12.2792 2.38401C12.05 2.07839 11.8398 1.86828 11.5915 1.71547C10.3691 1.12333 9.03197 0.684002 7.67578 0.550293C8.40163 0.798609 8.99377 1.63906 9.41399 2.86154C9.73871 3.7975 9.96793 4.92447 10.1016 6.16605C10.2162 7.08291 10.2544 8.03797 10.2735 9.01214C10.2926 9.9863 10.2353 10.9605 10.1207 11.8773C11.2286 12.3549 12.3365 12.7178 13.2915 12.9088Z", fill: "url(#paint5_linear_14814_7891)" }), (0, jsx_runtime_1.jsxs)("defs", { children: [(0, jsx_runtime_1.jsxs)("linearGradient", { id: "paint0_linear_14814_7891", x1: "8.6398", y1: "1.16972", x2: "2.44665", y2: "4.568", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#474B5D", stopOpacity: "0.6" }), (0, jsx_runtime_1.jsx)("stop", { offset: "0.0444639", stopColor: "#474B5D", stopOpacity: "0.6178" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#474B5D" })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: "paint1_linear_14814_7891", x1: "10.8575", y1: "5.21142", x2: "4.66434", y2: "8.60972", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#474B5D", stopOpacity: "0.6" }), (0, jsx_runtime_1.jsx)("stop", { offset: "0.0444639", stopColor: "#474B5D", stopOpacity: "0.6178" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#474B5D" })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: "paint2_linear_14814_7891", x1: "1.56125", y1: "12.7384", x2: "7.60074", y2: "16.4025", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#474B5D", stopOpacity: "0.6" }), (0, jsx_runtime_1.jsx)("stop", { offset: "0.0444639", stopColor: "#474B5D", stopOpacity: "0.6178" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#474B5D" })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: "paint3_linear_14814_7891", x1: "3.95133", y1: "8.79742", x2: "9.99082", y2: "12.4615", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#474B5D", stopOpacity: "0.6" }), (0, jsx_runtime_1.jsx)("stop", { offset: "0.0444639", stopColor: "#474B5D", stopOpacity: "0.6178" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#474B5D" })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: "paint4_linear_14814_7891", x1: "15.1198", y1: "13.0851", x2: "15.2734", y2: "6.02267", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#474B5D", stopOpacity: "0.6" }), (0, jsx_runtime_1.jsx)("stop", { offset: "0.0444639", stopColor: "#474B5D", stopOpacity: "0.6178" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#474B5D" })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: "paint5_linear_14814_7891", x1: "10.5104", y1: "12.9847", x2: "10.664", y2: "5.92228", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { stopColor: "#474B5D", stopOpacity: "0.6" }), (0, jsx_runtime_1.jsx)("stop", { offset: "0.0444639", stopColor: "#474B5D", stopOpacity: "0.6178" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#474B5D" })] })] })] }));
+exports.AboutLudoDarkIcon = AboutLudoDarkIcon;
+const ApiIcon = () => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.81256 1.6375C6.81256 1.28542 6.52715 1 6.17507 1C5.82299 1 5.53757 1.28542 5.53757 1.6375V3.70532C4.43775 3.9884 3.62508 4.98679 3.62508 6.17499V8.08749H1.6375C1.28542 8.08749 1 8.37291 1 8.72499C1 9.07707 1.28542 9.36249 1.6375 9.36249H3.62508V10.6375H1.6375C1.28542 10.6375 1 10.9229 1 11.275C1 11.6271 1.28542 11.9125 1.6375 11.9125H3.62508V13.1875H1.6375C1.28542 13.1875 1 13.4729 1 13.825C1 14.1771 1.28542 14.4625 1.6375 14.4625H3.70542C3.98849 15.5623 4.98688 16.375 6.17507 16.375H8.08756V18.3625C8.08756 18.7146 8.37297 19 8.72505 19C9.07713 19 9.36255 18.7146 9.36255 18.3625V16.375H10.6375V18.3625C10.6375 18.7146 10.923 19 11.275 19C11.6271 19 11.9125 18.7146 11.9125 18.3625V16.375H13.1875V18.3625C13.1875 18.7146 13.4729 19 13.825 19C14.1771 19 14.4625 18.7146 14.4625 18.3625V16.2947C15.5623 16.0116 16.375 15.0132 16.375 13.825V11.9125H18.3625C18.7146 11.9125 19 11.6271 19 11.275C19 10.9229 18.7146 10.6375 18.3625 10.6375H16.375V9.36249H18.3625C18.7146 9.36249 19 9.07707 19 8.72499C19 8.37291 18.7146 8.08749 18.3625 8.08749H16.375V6.81249H18.3625C18.7146 6.81249 19 6.52707 19 6.17499C19 5.82291 18.7146 5.53749 18.3625 5.53749H16.2947C16.0116 4.43766 15.0132 3.62499 13.825 3.62499H11.9125V1.6375C11.9125 1.28542 11.6271 1 11.275 1C10.923 1 10.6375 1.28542 10.6375 1.6375V3.62499H9.36255V1.6375C9.36255 1.28542 9.07713 1 8.72505 1C8.37297 1 8.08756 1.28542 8.08756 1.6375V3.62499H6.81256V1.6375ZM7.29069 11.5939V7.44999H6.17507V11.5939C6.17507 12.8261 7.17403 13.8251 8.40631 13.8251H12.55V12.7095H8.40631C7.79017 12.7095 7.29069 12.21 7.29069 11.5939Z", fill: "#B0B2C0" }) }));
+exports.ApiIcon = ApiIcon;
+const ExploreIcon = () => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 18C14.4182 18 18 14.4183 18 10C18 5.58172 14.4182 2 10 2C5.58179 2 2 5.58172 2 10C2 14.4183 5.58179 18 10 18ZM12.7764 6.71751L8.42188 8.16904C8.30225 8.20885 8.2085 8.30258 8.1687 8.42203L6.71729 12.7766C6.61304 13.0893 6.9104 13.3868 7.22314 13.2826L11.5779 11.8311C11.6973 11.7913 11.791 11.6975 11.8308 11.5781L13.2825 7.22346C13.3867 6.91077 13.0891 6.61327 12.7764 6.71751ZM10.9998 9.99998C10.9998 10.5523 10.552 11 9.99976 11C9.44751 11 8.99976 10.5523 8.99976 9.99998C8.99976 9.44769 9.44751 8.99998 9.99976 8.99998C10.552 8.99998 10.9998 9.44769 10.9998 9.99998Z", fill: "#B0B2C0" }) }));
+exports.ExploreIcon = ExploreIcon;
+const MyInvitesIcon = () => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M13.4917 1.66699H6.50841C3.47508 1.66699 1.66675 3.47533 1.66675 6.50866V13.4837C1.66675 16.5253 3.47508 18.3337 6.50841 18.3337H13.4834C16.5167 18.3337 18.3251 16.5253 18.3251 13.492V6.50866C18.3334 3.47533 16.5251 1.66699 13.4917 1.66699ZM13.3334 10.6253H10.6251V13.3337C10.6251 13.6753 10.3417 13.9587 10.0001 13.9587C9.65841 13.9587 9.37508 13.6753 9.37508 13.3337V10.6253H6.66675C6.32508 10.6253 6.04175 10.342 6.04175 10.0003C6.04175 9.65866 6.32508 9.37533 6.66675 9.37533H9.37508V6.66699C9.37508 6.32533 9.65841 6.04199 10.0001 6.04199C10.3417 6.04199 10.6251 6.32533 10.6251 6.66699V9.37533H13.3334C13.6751 9.37533 13.9584 9.65866 13.9584 10.0003C13.9584 10.342 13.6751 10.6253 13.3334 10.6253Z", fill: "#B0B2C0" }) }));
+exports.MyInvitesIcon = MyInvitesIcon;
+const RewardsIcon = () => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M14.925 8.93341H12.35V2.93341C12.35 1.53341 11.5917 1.25008 10.6667 2.30008L10 3.05841L4.35834 9.47508C3.58334 10.3501 3.90834 11.0667 5.07501 11.0667H7.65001V17.0667C7.65001 18.4667 8.40834 18.7501 9.33334 17.7001L10 16.9417L15.6417 10.5251C16.4167 9.65008 16.0917 8.93341 14.925 8.93341Z", fill: "#B0B2C0" }) }));
+exports.RewardsIcon = RewardsIcon;
+const LeaderboardsIcon = () => ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [(0, jsx_runtime_1.jsx)("path", { d: "M8 10C8 9.44772 8.44772 9 9 9H12C12.5523 9 13 9.44772 13 10V17.0001H8V10Z", fill: "#B0B2C0" }), (0, jsx_runtime_1.jsx)("path", { d: "M14 13.5H17C17.5523 13.5 18 13.9477 18 14.5V16C18 16.5523 17.5523 17 17 17H14V13.5Z", fill: "#B0B2C0" }), (0, jsx_runtime_1.jsx)("path", { d: "M3 12.5C3 11.9477 3.44772 11.5 4 11.5H7V17H3V12.5Z", fill: "#B0B2C0" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.8328 1.39174C10.7859 1.24758 10.6516 1.15 10.5 1.15C10.3484 1.15 10.2141 1.24758 10.1672 1.39174L9.53759 3.32721H7.5C7.34834 3.32721 7.21393 3.42489 7.1671 3.56914C7.12027 3.71339 7.17168 3.87139 7.29442 3.96047L8.94254 5.15656L8.31306 7.09173C8.26616 7.23592 8.31743 7.3939 8.44005 7.48307C8.56267 7.57224 8.72877 7.57232 8.85147 7.48326L10.5 6.28687L12.1485 7.48326C12.2712 7.57232 12.4373 7.57224 12.5599 7.48307C12.6826 7.3939 12.7338 7.23592 12.6869 7.09173L12.0575 5.15656L13.7056 3.96047C13.8283 3.87139 13.8797 3.71339 13.8329 3.56914C13.7861 3.42489 13.6517 3.32721 13.5 3.32721H11.4624L10.8328 1.39174Z", fill: "#B0B2C0", stroke: "#B0B2C0", strokeWidth: "0.7", strokeLinejoin: "round" })] }));
+exports.LeaderboardsIcon = LeaderboardsIcon;
+const ReferralDashboardIcon = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("rect", { x: "2.5", y: "2.5", width: "6.92308", height: "9.23077", rx: "1", fill: "#B0B2C0" }), (0, jsx_runtime_1.jsx)("rect", { x: "10.5769", y: "8.26953", width: "6.92308", height: "9.23077", rx: "1", fill: "#B0B2C0" }), (0, jsx_runtime_1.jsx)("rect", { x: "10.5769", y: "2.5", width: "6.92308", height: "4.61539", rx: "1", fill: "#B0B2C0" }), (0, jsx_runtime_1.jsx)("rect", { x: "2.5", y: "12.8843", width: "6.92308", height: "4.61539", rx: "1", fill: "#B0B2C0" })] }));
+exports.ReferralDashboardIcon = ReferralDashboardIcon;
+const SubmitNftIcon = () => ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.51162 1.66992L13.495 1.66992C16.5284 1.66992 18.3367 3.47826 18.3284 6.51159V13.4949C18.3284 16.5283 16.52 18.3366 13.4867 18.3366H6.51162C3.47827 18.3366 1.66992 16.5283 1.66992 13.4866L1.66992 6.51159C1.66992 3.47826 3.47827 1.66992 6.51162 1.66992ZM10.65 6C10.65 5.64101 10.3589 5.35 9.99996 5.35C9.64097 5.35 9.34996 5.64101 9.34996 6V12.1411L7.45956 10.2507C7.20572 9.99684 6.79416 9.99684 6.54032 10.2507C6.28647 10.5045 6.28647 10.9161 6.54032 11.1699L9.54034 14.1699C9.79418 14.4238 10.2057 14.4238 10.4596 14.1699L13.4596 11.1699C13.7134 10.9161 13.7134 10.5045 13.4596 10.2507C13.2058 9.99684 12.7942 9.99684 12.5404 10.2507L10.65 12.1411L10.65 6Z", fill: "#B0B2C0" }) }));
+exports.SubmitNftIcon = SubmitNftIcon;

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

@@ -0,0 +1,2 @@
+declare const Sidebar: () => import("react/jsx-runtime").JSX.Element;
+export default Sidebar;

package/build/components/sidebar/index.js

@@ -0,0 +1,135 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const data_1 = require("./data");
+const sidebarInviteCodeLabel_1 = __importDefault(require("./sidebarInviteCodeLabel"));
+const useExtension_1 = __importDefault(require("../../hooks/extension/useExtension"));
+const useSignOut_1 = require("../../modules/user/auth/useSignOut");
+const store_1 = require("../../modules/user/store");
+const ui_1 = require("../../store/ui");
+const ScreenWidth_1 = require("../../styles/ScreenWidth");
+const Userpic_1 = __importDefault(require("../../system/Img/Userpic"));
+const scale_1 = require("../../utils/adaptive/scale");
+const auth_1 = require("../../utils/auth");
+const screen_1 = require("../../utils/screen");
+const constants_1 = require("@ludo.ninja/core/build/constants");
+const sidebar_1 = require("@ludo.ninja/ui/build/components/sidebar");
+const MainButton_1 = __importDefault(require("@ludo.ninja/ui/build/system/Buttons/MainButton"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const link_1 = __importDefault(require("next/link"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const MenuItem = styled_components_1.default.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};
+
+  ${ScreenWidth_1.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};
+    }
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    font-size: ${(0, _4k_1.adaptiveValueCalc)(15)};
+    line-height: ${(0, _4k_1.adaptiveValueCalc)(22)};
+    gap: ${(0, _4k_1.adaptiveValueCalc)(8)};
+    padding: ${(0, _4k_1.adaptiveValueCalc)(12)} ${(0, _4k_1.adaptiveValueCalc)(4)};
+    text-indent: ${(0, _4k_1.adaptiveValueCalc)(4)};
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(4)};
+
+    img {
+      width: ${(0, _4k_1.adaptiveValueCalc)(20)};
+      height: ${(0, _4k_1.adaptiveValueCalc)(20)};
+    }
+  }
+`;
+const BeforeMenuContainer = styled_components_1.default.div `
+  padding: 12px 0;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.divider};
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    padding: ${(0, _4k_1.adaptiveValueCalc)(12)} 0;
+    border-bottom: ${(0, _4k_1.adaptiveValueCalc)(1)} solid ${({ theme }) => theme.colors.divider};
+  }
+`;
+const SLink = (0, styled_components_1.default)(link_1.default) `
+  &:not(:last-child) svg path {
+    fill: ${({ theme }) => theme.colors.sidebarSvgPathFill};
+  }
+
+  .icon-wrapper {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+      width: ${(0, _4k_1.adaptiveValueCalc)(20)};
+      height: ${(0, _4k_1.adaptiveValueCalc)(20)};
+
+      svg {
+        transform: ${(props) => "transform" in props.scale && props.scale.transform};
+      }
+    }
+  }
+`;
+// Component
+const Sidebar = () => {
+    const redirectToLoginWindow = (0, auth_1.useRedirectToLoginWindow)();
+    const closeSidebar = (0, ui_1.useUiStore)((state) => state.closeSidebar);
+    const isSidebarOpen = (0, ui_1.useUiStore)((state) => state.isSidebarOpen);
+    const isAuthorized = (0, store_1.useUserStore)((state) => state.isSignedIn);
+    const getUser = (0, store_1.useUserStore)((state) => state.user);
+    const signOut = (0, useSignOut_1.useSignOut)();
+    const { deviceType } = (0, screen_1.useWindowDimensions)();
+    const { isExtensionInstalled, openExtensionChromeStorePage, openExtension } = (0, useExtension_1.default)();
+    const { wallets, userId } = getUser ?? [""];
+    // Todo fav-list
+    const sideBarData = (0, data_1.useSidebarData)();
+    const { windowDimensions } = (0, screen_1.useWindowDimensionsWithServerInitial)();
+    return ((0, jsx_runtime_1.jsx)(sidebar_1.Sidebar, { closeSidebar: closeSidebar, isOpen: isSidebarOpen, handle: {
+            login: () => {
+                closeSidebar();
+                redirectToLoginWindow();
+            },
+            logout: () => {
+                signOut(true);
+            },
+        }, isAuthorized: isAuthorized, userWallets: wallets, slots: {
+            menu: sideBarData.map(({ title, href, icon, isExternalUrl }) => ((0, jsx_runtime_1.jsxs)(SLink, { href: href, target: isExternalUrl ? "_blank" : "_self", onClick: closeSidebar, passHref: isExternalUrl, scale: (0, scale_1.getAdaptiveScale)({ windowDimensions, currentSize: 1 }), children: [(0, jsx_runtime_1.jsx)("span", { className: "icon-wrapper", children: icon }), title] }, title))),
+            userPicture: ({ children, height, width, isNeedBoxTransform }) => ((0, jsx_runtime_1.jsx)(Userpic_1.default, { width: width, height: height, userId: userId, isNeedBoxTransform: isNeedBoxTransform, children: children })),
+            inviteCode: (0, jsx_runtime_1.jsx)(sidebarInviteCodeLabel_1.default, {}),
+            ...(deviceType == "isDesktop" && isAuthorized
+                ? {
+                    beforeMenu: ((0, jsx_runtime_1.jsx)(BeforeMenuContainer, { children: isExtensionInstalled ? ((0, jsx_runtime_1.jsxs)(MenuItem, { onClick: () => {
+                                closeSidebar();
+                                openExtension();
+                            }, children: [(0, jsx_runtime_1.jsx)("img", { src: `${constants_1.staticLink}/public/sidebar/ludoX.svg`, alt: "Ludo X", width: 20, height: 20 }), "Open Ludo X"] })) : ((0, jsx_runtime_1.jsx)("div", { style: { padding: "12px 0" }, children: (0, jsx_runtime_1.jsx)(MainButton_1.default, { onClick: () => {
+                                    closeSidebar();
+                                    openExtensionChromeStorePage();
+                                }, text: "Install Ludo X now", variant: "primaryM" }) })) })),
+                }
+                : {}),
+        } }));
+};
+exports.default = Sidebar;

package/build/components/sidebar/initializer.d.ts

@@ -0,0 +1 @@
+export declare const SidebarInitializer: () => import("react/jsx-runtime").JSX.Element;

package/build/components/sidebar/initializer.js

@@ -0,0 +1,36 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarInitializer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dynamic_1 = __importDefault(require("next/dynamic"));
+const Sidebar = (0, dynamic_1.default)(() => Promise.resolve().then(() => __importStar(require('./index'))).then((res) => res.default), {
+    ssr: false,
+});
+const SidebarInitializer = () => (0, jsx_runtime_1.jsx)(Sidebar, {});
+exports.SidebarInitializer = SidebarInitializer;

package/build/components/sidebar/sidebarFilters/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const SidebarFilters: ({ isOpen, handleClose, children, }: {
+    isOpen: boolean;
+    handleClose: () => void;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SidebarFilters;