@ludo.ninja/components 2.1.36 → 2.1.38

package/build/components/sidebar/index.js

@@ -5,129 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const link_1 = __importDefault(require("next/link"));
-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 sidebarInviteCodeLabel_1 = __importDefault(require("./sidebarInviteCodeLabel"));
-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 sidebarSpa_1 = require("./sidebarSpa");
 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 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};
-  }
-`;
-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 sidebarInviteCodeLabel_1 = __importDefault(require("./sidebarInviteCodeLabel"));
 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,
-        }, 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: "/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" }) })) })),
-                }
-                : {}),
-        } }));
+    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 }));
 };
 // Export
 exports.default = Sidebar;

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

@@ -0,0 +1,10 @@
+export declare const SLinkStyles: (Link: any) => import("styled-components").StyledComponent<any, import("styled-components").DefaultTheme, {
+    scale: {
+        transform: string;
+    } | object;
+}, string | number | symbol>;
+export declare const SidebarSpa: ({ SLink, UserPic, SidebarInviteCodeLabel }: {
+    SLink: any;
+    UserPic: any;
+    SidebarInviteCodeLabel: any;
+}) => import("react/jsx-runtime").JSX.Element;

package/build/components/sidebar/sidebarSpa.js

@@ -0,0 +1,131 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarSpa = exports.SLinkStyles = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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};
+  }
+`;
+const SLinkStyles = (Link) => (0, styled_components_1.default)(Link) `
+  &: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};
+      }
+    }
+  }
+`;
+exports.SLinkStyles = SLinkStyles;
+// Component
+const SidebarSpa = ({ SLink, UserPic, SidebarInviteCodeLabel }) => {
+    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)(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, { width: width, height: height, userId: userId, isNeedBoxTransform: isNeedBoxTransform, children: children })),
+            inviteCode: (0, jsx_runtime_1.jsx)(SidebarInviteCodeLabel, {}),
+            ...(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" }) })) })),
+                }
+                : {}),
+        } }));
+};
+exports.SidebarSpa = SidebarSpa;

package/build/layouts/AppLayout.js

@@ -1,30 +1,17 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AppLayout = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = require("styled-components");
-const browser_1 = __importDefault(require("@marker.io/browser"));
-const utils_1 = require("@ludo.ninja/utils");
-const react_1 = require("react");
 const ui_1 = require("../store/ui");
 const client_1 = require("@apollo/client");
 const apollo_1 = require("../hooks/apollo");
 const GlobalLayout_1 = require("./GlobalLayout");
 const store_1 = require("../modules/user/store");
 const index_1 = require("../store/index");
-const env_1 = require("../store/env");
 const AppLayout = ({ children, pageProps }) => {
     const apolloClient = (0, apollo_1.useApollo)(pageProps);
     const theme = (0, ui_1.useUiStore)((state) => state.theme);
-    const NODE_ENV = (0, env_1.useEnvStore)(state => state.NODE_ENV);
-    (0, react_1.useEffect)(() => {
-        if (!utils_1.isServer && NODE_ENV === "production") {
-            browser_1.default.loadWidget({ project: "65f2e310e9298c9dca4d4ca9" });
-        }
-    }, []);
     return ((0, jsx_runtime_1.jsx)(index_1.SSRProvider, { initialState: {
             isMobile: pageProps.isMobile,
         }, children: (0, jsx_runtime_1.jsx)(client_1.ApolloProvider, { client: apolloClient, children: (0, jsx_runtime_1.jsx)(styled_components_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(store_1.UserProvider, { initialState: {

package/build/system/Img/Userpic/UserPicSpa.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+declare const UserPicSpa: ({ userId, width, height, isNeedBoxTransform, children, Image, Link }: {
+    userId: string;
+    width: number;
+    height: number;
+    isNeedBoxTransform: boolean;
+    children?: React.ReactNode;
+    Image: any;
+    Link: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default UserPicSpa;

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

@@ -0,0 +1,83 @@
+"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 react_1 = require("react");
+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 UserPicSpa = ({ userId, width, height, isNeedBoxTransform, children, Image, Link }) => {
+    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, { 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, { href: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["profile"]}/${userId}/nfts`, className: 'userPicBlock', children: [loading || isLoadingProfileData
+                    ? renderSkeleton()
+                    : renderImageOrDefaultUserPic(), children] }) }));
+};
+exports.default = UserPicSpa;

package/build/system/Img/Userpic/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 declare const UserPic: ({ userId, width, height, isNeedBoxTransform, children, }: {
     userId: string;
     width: number;

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

@@ -4,83 +4,12 @@ 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 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', '')))};
-    }
-  }
-`;
+const UserPicSpa_1 = __importDefault(require("./UserPicSpa"));
 // Component
 const UserPic = ({ userId, width, height, isNeedBoxTransform, 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] }) }));
+    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 }));
 };
 // Export
 exports.default = UserPic;

package/package.json

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