@ludo.ninja/components 2.1.41 → 2.1.43

package/build/api/server-search/queries/useFetchFindAllTopEntitiesByName/index.d.ts

@@ -1,7 +1,7 @@
 import { ApolloClient, NormalizedCacheObject } from '@apollo/client';
 import { searchSchema as schema } from '@ludo.ninja/api';
 import { ProfileEntity } from '@ludo.ninja/core';
-import AssetEntity from '../../../../dto/AssetEntity';
+import AssetEntity from '../../../../dto/AssetSearchEntity';
 export declare const prefetchFindAllTopEntitiesByName: ({ name, pageSize }: schema.IQueryFindAllTopEntitiesByNameArgs, apolloClient: ApolloClient<NormalizedCacheObject>) => Promise<import("@apollo/client").ApolloQueryResult<any> | {
     data: {
         findAllTopEntitiesByName: null;

package/build/api/server-search/queries/useFetchFindAllTopEntitiesByName/index.js

@@ -7,7 +7,7 @@ exports.useFetchFindAllTopEntitiesByName = exports.prefetchFindAllTopEntitiesByN
 const react_1 = require("react");
 const api_1 = require("@ludo.ninja/api");
 const core_1 = require("@ludo.ninja/core");
-const AssetEntity_1 = __importDefault(require("../../../../dto/AssetEntity"));
+const AssetSearchEntity_1 = __importDefault(require("../../../../dto/AssetSearchEntity"));
 const prefetchFindAllTopEntitiesByName = ({ name, pageSize }, apolloClient) => {
     return apolloClient
         .query({
@@ -30,7 +30,7 @@ const useFetchFindAllTopEntitiesByName = () => {
             uri: api_1.hosts.searchHost,
         },
         onCompleted: ({ findAllTopEntitiesByName }) => {
-            const assets = findAllTopEntitiesByName.assets.map((asset) => new AssetEntity_1.default(asset)) || [];
+            const assets = findAllTopEntitiesByName.assets.map((asset) => new AssetSearchEntity_1.default(asset)) || [];
             const profiles = findAllTopEntitiesByName.profiles.map((profile) => new core_1.ProfileEntity(profile)) || [];
             setTopEntities({
                 assets,

package/build/components/search/searchSuggestions/index.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { collectionsSchema as schema } from '@ludo.ninja/api';
 import { ProfileEntity } from '@ludo.ninja/core';
-import AssetEntity from '../../../dto/AssetEntity';
+import AssetSearchEntity from '../../../dto/AssetSearchEntity';
 interface Props {
-    assets: AssetEntity[];
+    assets: AssetSearchEntity[];
     profiles: ProfileEntity[];
     collections: schema.ICollection[];
     searchTerm: string;

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/dto/AssetSearchEntity/index.d.ts

@@ -0,0 +1,60 @@
+import { assetSchema as schema } from "@ludo.ninja/api";
+import { BlockChainEntity, MarketPlaceEntity } from "@ludo.ninja/core";
+import { LabelKeys } from '../common/ItemType';
+import IAssetSearchEntity from './interface';
+declare class AssetSearchEntity implements IAssetSearchEntity {
+    private assetId;
+    private blockchain;
+    private ownersProfiles;
+    private ownersAddresses;
+    private itemType;
+    private address;
+    private tokenId;
+    private medias;
+    private name;
+    private description;
+    private creatorsProfiles;
+    private creatorsAddresses;
+    private markets;
+    private originalUrls;
+    private rank;
+    private collection;
+    private category;
+    private categoryLabel;
+    private attributes;
+    private blockTimestamp;
+    private price;
+    constructor(asset: schema.IAsset);
+    getAssetId(): string;
+    getIsSlider(): boolean;
+    getSplitedAssetId(): string;
+    getName(): null | string;
+    getMarkets(): MarketPlaceEntity[] | null;
+    getBlockchain(): BlockChainEntity;
+    getPrice(): {
+        latestPriceAmount: number | null;
+        latestPriceCurrency: string | null;
+    };
+    getBlockTimestamp(): number;
+    getAttributes(): schema.IAttribute[];
+    getDescription(): null | string;
+    getTokenId(): string | null;
+    getCollection(): {
+        collectionId: string | null;
+        collectionTitle: string | null;
+        collectionMedias: schema.IMedia[];
+    };
+    getCategory(): string | null;
+    getCategoryLabel(): string | null;
+    getOriginalUrls(): schema.IMedia[] | null;
+    getItemType(): LabelKeys;
+    getRank(): number;
+    getAddress(): string | null;
+    getAssetLink(): string;
+    getOwnersProfiles(): schema.IProfile[];
+    getAssetMedias(): schema.IMedia[];
+    getCreatorsProfiles(): schema.IProfile[];
+    getOwnersAddresses(): string[] | null;
+    getCreatorsAddresses(): string[] | null;
+}
+export default AssetSearchEntity;

package/build/dto/AssetSearchEntity/index.js

@@ -0,0 +1,181 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const core_1 = require("@ludo.ninja/core");
+const utils_1 = require("@ludo.ninja/utils");
+const ItemType_1 = require("../common/ItemType");
+class AssetSearchEntity {
+    assetId;
+    blockchain;
+    ownersProfiles;
+    ownersAddresses;
+    itemType;
+    address;
+    tokenId;
+    medias;
+    name;
+    description;
+    creatorsProfiles;
+    creatorsAddresses;
+    markets;
+    originalUrls;
+    rank;
+    collection;
+    category;
+    categoryLabel;
+    attributes;
+    blockTimestamp;
+    price;
+    constructor(asset) {
+        this.assetId = asset.assetId;
+        this.blockchain = new core_1.BlockChainEntity(asset?.blockchain);
+        this.markets =
+            asset.markets?.map((market) => new core_1.MarketPlaceEntity({
+                marketName: market?.marketName,
+                marketUrl: market?.marketUrl,
+                marketId: market?.marketUrl,
+            })) || [];
+        this.ownersProfiles = asset.ownersProfiles || null;
+        this.ownersAddresses = asset.ownersAddresses;
+        this.itemType = ItemType_1.LabelKeys.asset;
+        this.address = asset.address;
+        this.tokenId = asset.tokenId;
+        this.medias = asset.medias;
+        this.name = asset.name;
+        this.description = asset.description;
+        this.creatorsProfiles = asset.creatorsProfiles || null;
+        this.creatorsAddresses = asset.creatorsAddresses;
+        this.originalUrls = asset.originalUrls;
+        this.rank = asset.rank;
+        this.collection = {
+            collectionId: asset.collectionId,
+            collectionTitle: asset.collectionTitle,
+            collectionMedias: asset.collectionMedias,
+        };
+        this.category = asset.category;
+        this.categoryLabel = asset.categoryLabel;
+        this.price = {
+            latestPriceAmount: asset.latestPriceAmount,
+            latestPriceCurrency: asset.latestPriceCurrency,
+        };
+        this.attributes = asset.attributes;
+        this.blockTimestamp = asset.blockTimestamp;
+    }
+    // accessors
+    getAssetId() {
+        return this.assetId;
+    }
+    getIsSlider() {
+        return this.getAssetMedias()
+            ? this.getAssetMedias()?.length > 1
+            : false;
+    }
+    getSplitedAssetId() {
+        return this.getAssetId().split(".")[1] || this.getAssetId();
+    }
+    getName() {
+        return this.name ? this.name : null;
+    }
+    getMarkets() {
+        return this.markets ? this.markets : null;
+    }
+    getBlockchain() {
+        return this.blockchain;
+    }
+    getPrice() {
+        return {
+            latestPriceAmount: this.price.latestPriceAmount
+                ? this.price.latestPriceAmount
+                : null,
+            latestPriceCurrency: this.price.latestPriceCurrency
+                ? this.price.latestPriceCurrency
+                : null,
+        };
+    }
+    getBlockTimestamp() {
+        return this.blockTimestamp;
+    }
+    getAttributes() {
+        return this.attributes?.length
+            ? this.attributes
+            : [];
+    }
+    getDescription() {
+        return this.description ? this.description : null;
+    }
+    getTokenId() {
+        return this.tokenId ? this.tokenId : null;
+    }
+    getCollection() {
+        return {
+            collectionId: this.collection.collectionId
+                ? this.collection.collectionId
+                : null,
+            collectionTitle: this.collection.collectionTitle
+                ? this.collection.collectionTitle
+                : null,
+            collectionMedias: this.collection.collectionMedias?.length
+                ? this.collection.collectionMedias
+                : [],
+        };
+    }
+    getCategory() {
+        return this.category ? this.category : null;
+    }
+    getCategoryLabel() {
+        return this.categoryLabel ? this.categoryLabel : null;
+    }
+    getOriginalUrls() {
+        if (!this.originalUrls)
+            return null;
+        const convertedOriginalUrlsArray = [];
+        for (let i = 0; i < this.originalUrls?.length; i++) {
+            convertedOriginalUrlsArray.push({
+                url: (0, utils_1.checkGltfUrl)(this.originalUrls[i] || ""),
+                mimeType: null,
+                originalMime: null,
+            });
+        }
+        return convertedOriginalUrlsArray;
+    }
+    getItemType() {
+        return this.itemType;
+    }
+    getRank() {
+        return this.rank ? Math.round(this.rank) : 0;
+    }
+    getAddress() {
+        return this.address ? this.address : null;
+    }
+    getAssetLink() {
+        if (this.getItemType() === ItemType_1.LabelKeys.asset) {
+            if (this.getBlockchain().getBlockChainPrivateLabel() ===
+                (core_1.BlockChainKeys.elrond || core_1.BlockChainKeys.solana)) {
+                return `/${this.getItemType()}/${this.getBlockchain().getBlockChainPrivateLabel()}/${this.getAssetId()}`;
+            }
+            else {
+                return `/${this.getItemType()}/${this.getBlockchain().getBlockChainPrivateLabel()}/${this.getAddress()}/${this.getTokenId()}`;
+            }
+        }
+        return `/${this.getItemType()}/${this.getAssetId()}`;
+    }
+    getOwnersProfiles() {
+        return this.ownersProfiles
+            ? this.ownersProfiles
+            : [];
+    }
+    getAssetMedias() {
+        return this.medias ? this.medias : [];
+    }
+    getCreatorsProfiles() {
+        return this.creatorsProfiles
+            ? this.creatorsProfiles
+            : [];
+    }
+    getOwnersAddresses() {
+        return this.ownersAddresses ? this.ownersAddresses : null;
+    }
+    getCreatorsAddresses() {
+        return this.creatorsAddresses ? this.creatorsAddresses : null;
+    }
+}
+exports.default = AssetSearchEntity;

package/build/dto/AssetSearchEntity/interface.d.ts

@@ -0,0 +1,36 @@
+import { assetSchema as schema } from '@ludo.ninja/api';
+import { BlockChainEntity, MarketPlaceEntity } from '@ludo.ninja/core';
+import { LabelKeys } from '../common/ItemType';
+interface IAssetSearchEntity {
+    getAssetId(): string;
+    getBlockchain(): BlockChainEntity;
+    getOwnersProfiles(): schema.IProfile[];
+    getBlockTimestamp(): number;
+    getCreatorsProfiles(): schema.IProfile[];
+    getSplitedAssetId(): string;
+    getAttributes(): schema.IAttribute[];
+    getOwnersAddresses(): string[] | null;
+    getCreatorsAddresses(): string[] | null;
+    getIsSlider(): boolean;
+    getMarkets(): MarketPlaceEntity[] | null;
+    getPrice(): {
+        latestPriceAmount: number | null;
+        latestPriceCurrency: string | null;
+    };
+    getAssetMedias(): schema.IMedia[];
+    getItemType(): LabelKeys;
+    getName(): null | string;
+    getOriginalUrls(): schema.IMedia[] | null;
+    getAddress(): string | null;
+    getCollection(): {
+        collectionId: string | null;
+        collectionTitle: string | null;
+        collectionMedias: schema.IMedia[];
+    };
+    getCategory(): string | null;
+    getCategoryLabel(): string | null;
+    getTokenId(): string | null;
+    getDescription(): string | null;
+    getRank(): number;
+}
+export default IAssetSearchEntity;

package/build/dto/AssetSearchEntity/interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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.41",
+  "version": "2.1.43",
   "private": false,
   "main": "build/index.js",
   "types": "build/index.d.ts",