@ludo.ninja/components 2.1.42 → 2.1.43

package/build/components/search/searchSuggestions/index.js

@@ -119,7 +119,7 @@ const SearchSuggestions = ({ searchTerm, assets, profiles, collections, isLoadin
                                                         // image and screenshots
                                                         miniatureUrl = (0, Urls_1.getAssetImage)(currentMedia?.url, '/noContent/noContent.svg', Urls_1.mediaSizes.small, NEXT_PUBLIC_STATIC_DOMAIN);
                                                     }
-                                                    return ((0, jsx_runtime_1.jsx)(searchSuggestionsItem_1.default, { name: asset?.getName(), link: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["asset"]}/${asset.getAssetLink().replace(`${ItemType_1.LabelKeys.asset}/`, "")}`, imgUrl: miniatureUrl, searchTerm: searchTerm }, `${asset?.getAssetId()}.${Math.random()}`));
+                                                    return ((0, jsx_runtime_1.jsx)(searchSuggestionsItem_1.default, { name: asset?.getName(), link: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["asset"]}${asset.getAssetLink().replace(`${ItemType_1.LabelKeys.asset}/`, "")}`, imgUrl: miniatureUrl, searchTerm: searchTerm }, `${asset?.getAssetId()}.${Math.random()}`));
                                                 }),
                                             },
                                         ]

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

@@ -1,2 +1,36 @@
+import React from "react";
+export declare const SLink: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof {
+    href: string | import("url").UrlObject;
+    as?: string | import("url").UrlObject;
+    replace?: boolean;
+    scroll?: boolean;
+    shallow?: boolean;
+    passHref?: boolean;
+    prefetch?: boolean;
+    locale?: string | false;
+    legacyBehavior?: boolean;
+    onMouseEnter?: React.MouseEventHandler<HTMLAnchorElement>;
+    onTouchStart?: React.TouchEventHandler<HTMLAnchorElement>;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+}> & {
+    href: string | import("url").UrlObject;
+    as?: string | import("url").UrlObject;
+    replace?: boolean;
+    scroll?: boolean;
+    shallow?: boolean;
+    passHref?: boolean;
+    prefetch?: boolean;
+    locale?: string | false;
+    legacyBehavior?: boolean;
+    onMouseEnter?: React.MouseEventHandler<HTMLAnchorElement>;
+    onTouchStart?: React.TouchEventHandler<HTMLAnchorElement>;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLAnchorElement>>, import("styled-components").DefaultTheme, {
+    scale: {
+        transform: string;
+    } | object;
+}, never>;
 declare const Sidebar: () => import("react/jsx-runtime").JSX.Element;
 export default Sidebar;

package/build/components/sidebar/index.js

@@ -3,13 +3,131 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SLink = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const link_1 = __importDefault(require("next/link"));
-const sidebarSpa_1 = require("./sidebarSpa");
 const Userpic_1 = __importDefault(require("../../system/Img/Userpic"));
 const sidebarInviteCodeLabel_1 = __importDefault(require("./sidebarInviteCodeLabel"));
+const styled_components_1 = __importDefault(require("styled-components"));
+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 data_1 = require("./data");
+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 scale_1 = require("../../utils/adaptive/scale");
+const auth_1 = require("../../utils/auth");
+const screen_1 = require("../../utils/screen");
+const useExtension_1 = __importDefault(require("../../hooks/extension/useExtension"));
+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};
+  }
+`;
+exports.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 = () => {
-    return ((0, jsx_runtime_1.jsx)(sidebarSpa_1.SidebarSpa, { SLink: (0, sidebarSpa_1.SLinkStyles)(link_1.default), UserPic: Userpic_1.default, SidebarInviteCodeLabel: sidebarInviteCodeLabel_1.default }));
+    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,
+        }, isAuthorized: isAuthorized, userWallets: wallets, slots: {
+            menu: sideBarData.map(({ title, href, icon, isExternalUrl }) => ((0, jsx_runtime_1.jsxs)(exports.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: "/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" }) })) })),
+                }
+                : {}),
+        } }));
 };
-// Export
 exports.default = Sidebar;

package/build/system/Img/Userpic/index.js

@@ -4,12 +4,83 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const image_1 = __importDefault(require("next/image"));
 const link_1 = __importDefault(require("next/link"));
-const UserPicSpa_1 = __importDefault(require("./UserPicSpa"));
+const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const store_1 = require("../../../modules/user/store");
+const env_1 = require("../../../store/env");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const boxTransform_1 = __importDefault(require("../../../styles/mixins/boxTransform"));
+const ImageInterceptor_1 = require("../ImageInterceptor");
+const useFetchUserPic_1 = __importDefault(require("../../../api/server-medias/queries/useFetchUserPic"));
+const defaultUserpic_svg_1 = __importDefault(require("../../../public/defaultUserpics/defaultUserpic"));
+const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
+// Styles
+const StyledHeaderUserPic = styled_components_1.default.div `
+  ${(props) => (props.isNeedBoxTransform ? boxTransform_1.default : null)}
+  .userPicBlock {
+    display: flex;
+  }
+
+  .userPicImage {
+    border-radius: 50%;
+    width: ${(props) => props.imageWidth};
+    height: ${(props) => props.imageHeight};
+
+    ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+      width: ${(props) => (0, _4k_1.adaptiveValueCalc)(Number(props.imageWidth.replace("px", "")))};
+      height: ${(props) => (0, _4k_1.adaptiveValueCalc)(Number(props.imageHeight.replace("px", "")))};
+    }
+  }
+`;
 // Component
 const UserPic = ({ userId, width, height, isNeedBoxTransform, children, }) => {
-    return ((0, jsx_runtime_1.jsx)(UserPicSpa_1.default, { userId: userId, Link: link_1.default, height: height, Image: image_1.default, width: width, isNeedBoxTransform: isNeedBoxTransform, children: children }));
+    const getMediaENVDomain = (0, env_1.useEnvStore)((state) => state.getMediaDomain);
+    const { isSignedIn, isLoadingProfileData, profileData } = (0, store_1.useUserStore)((state) => ({
+        isSignedIn: state.isSignedIn,
+        isLoadingProfileData: state.isLoadingProfileData,
+        profileData: state.profileData,
+    }));
+    const { load, userPic, loading } = (0, useFetchUserPic_1.default)();
+    const profileUserPic = profileData
+        ?.getUserPic({
+        mediaDomain: getMediaENVDomain(),
+    })
+        .includes("1.svg")
+        ? null
+        : profileData?.getUserPic({
+            mediaDomain: getMediaENVDomain(),
+        });
+    (0, react_1.useEffect)(() => {
+        if (isSignedIn &&
+            !isLoadingProfileData &&
+            profileData
+                ?.getUserPic({
+                mediaDomain: getMediaENVDomain(),
+            })
+                .includes("1.svg")) {
+            load(userId);
+        }
+    }, [userId, isSignedIn, isLoadingProfileData, profileData]);
+    const renderDefaultUserPic = () => {
+        return (0, jsx_runtime_1.jsx)(defaultUserpic_svg_1.default, { className: "userPicImage" });
+    };
+    const renderImage = () => {
+        return ((0, jsx_runtime_1.jsx)(ImageInterceptor_1.ImageInterceptor, { borderRadiusSkeleton: "50%", children: (0, jsx_runtime_1.jsx)(image_1.default, { src: (profileUserPic || userPic), className: "userPicImage", width: width, height: height, priority: true, alt: "ludo ninja userPick" }) }));
+    };
+    const renderImageOrDefaultUserPic = () => {
+        return profileUserPic || userPic ? renderImage() : renderDefaultUserPic();
+    };
+    const renderSkeleton = () => {
+        return (0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { className: "userPicImage" });
+    };
+    const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
+    return ((0, jsx_runtime_1.jsx)(StyledHeaderUserPic, { isNeedBoxTransform: isNeedBoxTransform, imageWidth: `${width}px`, imageHeight: `${height}px`, children: (0, jsx_runtime_1.jsxs)(link_1.default, { href: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["profile"]}/${userId}/nfts`, className: "userPicBlock", children: [loading || isLoadingProfileData
+                    ? renderSkeleton()
+                    : renderImageOrDefaultUserPic(), children] }) }));
 };
 // Export
 exports.default = UserPic;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ludo.ninja/components",
-  "version": "2.1.42",
+  "version": "2.1.43",
   "private": false,
   "main": "build/index.js",
   "types": "build/index.d.ts",