@ludo.ninja/components 2.3.36 → 2.3.37

package/build/components/assetPage/audioVideoPlayer/index.js

@@ -0,0 +1,308 @@
+"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.AudioVideoPlayer = exports.ReactPlayerWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const image_1 = __importDefault(require("next/image"));
+const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+const react_player_1 = __importDefault(require("react-player"));
+const screenfull_1 = __importDefault(require("screenfull"));
+const styled_components_1 = __importStar(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const colors_1 = require("../../../styles/colors");
+const index_1 = require("../../../system/index");
+const Duration_1 = __importDefault(require("./Duration"));
+exports.ReactPlayerWrapper = styled_components_1.default.div `
+  position: relative;
+  width: 510px;
+  height: ${(props) => (props.playerType === 'audio' ? '280px' : 'auto')};
+  display: flex;
+  margin-right: 60px;
+  background-image: url('${(props) => props.playerType === 'audio'
+    ? props.poster || '/assetPage/audioPlaceholder.svg'
+    : null}');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  border-radius: 16px;
+  overflow: hidden;
+
+  ${ScreenWidth_1.mediaQuery.desktop} {
+    height: ${(props) => (props.playerType === 'audio' ? '180px' : 'auto')};
+    align-items: flex-start;
+    width: 335px;
+    margin-right: 30px;
+  }
+
+  ${ScreenWidth_1.mediaQuery.tablet} {
+    margin-right: 0;
+  }
+
+  .player {
+    display: flex;
+    height: auto !important;
+    border-radius: 16px;
+    overflow: hidden;
+    ${(props) => props.isFullscreenMode
+    ? (0, styled_components_1.css) `
+            width: 100% !important;
+          `
+    : ''}
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    width: ${(0, _4k_1.adaptiveValueCalc)(510)};
+    height: ${(props) => props.playerType === 'audio' ? (0, _4k_1.adaptiveValueCalc)(280) : 'auto'};
+    margin-right: ${(0, _4k_1.adaptiveValueCalc)(60)};
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(16)};
+
+    .player {
+      border-radius: ${(0, _4k_1.adaptiveValueCalc)(16)};
+    }
+  }
+`;
+const InputRangeVolume = styled_components_1.default.div `
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  position: relative;
+
+  &:before {
+    content: '';
+    display: flex;
+    position: absolute;
+    transition: 0.5s color ease;
+    left: 0;
+    width: ${(props) => props.value * 100}%;
+    height: 5px;
+    background: #ebf0fc;
+
+    ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+      height: ${(0, _4k_1.adaptiveValueCalc)(5)};
+    }
+  }
+`;
+const InputRangeSound = (0, styled_components_1.default)(InputRangeVolume) `
+  width: 70px;
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    width: ${(0, _4k_1.adaptiveValueCalc)(70)};
+  }
+
+  &:before {
+    background: #b0b2c0;
+  }
+`;
+const FlexHelper = (0, styled_components_1.default)(index_1.Flex) `
+  justify-content: space-between;
+  padding: 25px;
+
+  ${ScreenWidth_1.mediaQuery.desktop} {
+    padding: 20px;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    padding: ${(0, _4k_1.adaptiveValueCalc)(25)};
+  }
+`;
+const InputRange = styled_components_1.default.input `
+  width: 100%;
+  -webkit-appearance: none;
+  position: relative;
+  opacity: 0.5;
+  -moz-appearance: none;
+  cursor: pointer;
+
+  &::-webkit-slider-thumb {
+    opacity: 0;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &::-webkit-slider-runnable-track {
+    background: #909999;
+    height: 5px;
+    ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+      height: ${(0, _4k_1.adaptiveValueCalc)(5)};
+    }
+  }
+`;
+const Controls = styled_components_1.default.div `
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  bottom: 0;
+`;
+const ControlButton = styled_components_1.default.button `
+  padding: 0;
+  background: transparent;
+  position: relative;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  user-select: none;
+  outline: none;
+
+  * {
+    user-select: none;
+  }
+
+  &:before {
+    position: absolute;
+    content: '';
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: ${colors_1.BlackColor};
+    opacity: 0.5;
+    z-index: -1;
+    ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+      height: ${(0, _4k_1.adaptiveValueCalc)(36)};
+      width: ${(0, _4k_1.adaptiveValueCalc)(36)};
+    }
+  }
+
+  &:hover {
+    &:before {
+      opacity: 0.6;
+    }
+  }
+  img {
+    width: 15px;
+    height: 15px;
+    ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+      height: ${(0, _4k_1.adaptiveValueCalc)(15)};
+      width: ${(0, _4k_1.adaptiveValueCalc)(15)};
+    }
+  }
+`;
+class AudioVideoPlayer extends react_1.Component {
+    player;
+    constructor(props) {
+        super(props);
+        this.state = {
+            url: this.props.src,
+            playing: false,
+            controls: false,
+            light: false,
+            volume: 0.8,
+            muted: false,
+            played: 0,
+            duration: 0,
+            playedSeconds: 0,
+            seeking: false,
+            loaded: 0,
+            loadedSeconds: 0,
+            error: false,
+            isFullscreenMode: false,
+        };
+    }
+    load = (url) => {
+        this.setState({
+            url,
+            played: 0,
+        });
+    };
+    handlePlayPause = () => {
+        this.setState({ playing: !this.state.playing });
+    };
+    handleVolumeChange = (e) => {
+        this.setState({ volume: parseFloat(e.target.value) });
+    };
+    handleToggleMuted = () => {
+        this.setState({
+            muted: !this.state.muted,
+            volume: 0,
+        });
+    };
+    handlePlay = () => {
+        this.setState({ playing: true });
+    };
+    handlePause = () => {
+        this.setState({ playing: false });
+    };
+    handleSeekMouseDown = () => {
+        this.setState({ seeking: true });
+    };
+    handleSeekChange = (e) => {
+        this.setState({ played: parseFloat(e.target.value) });
+    };
+    handleSeekMouseUp = (e) => {
+        this.setState({ seeking: false });
+        const event = e.target.value;
+        this.player?.seekTo(parseFloat(event));
+    };
+    handleProgress = (state) => {
+        if (!this.state.seeking) {
+            this.setState(state);
+        }
+    };
+    handleDuration = (duration) => {
+        this.setState({ duration });
+    };
+    handleClickFullscreen = () => {
+        const elem = document.getElementById('video-player');
+        screenfull_1.default.toggle(elem);
+    };
+    handleErrors = () => {
+        this.setState({ error: true });
+    };
+    renderLoadButton = (url, label) => {
+        return (0, jsx_runtime_1.jsx)("button", { onClick: () => this.load(url), children: label });
+    };
+    ref = (player) => {
+        this.player = player;
+    };
+    updateIsFullscreenMode = () => {
+        this.setState({
+            isFullscreenMode: screenfull_1.default.isFullscreen,
+        });
+    };
+    componentDidMount() {
+        screenfull_1.default.on('change', this.updateIsFullscreenMode);
+    }
+    componentWillUnmount() {
+        screenfull_1.default.off('change', this.updateIsFullscreenMode);
+    }
+    render() {
+        const { url, playing, light, volume, muted, played, duration, playedSeconds, error, isFullscreenMode, } = this.state;
+        if (!url)
+            return null;
+        return ((0, jsx_runtime_1.jsx)(exports.ReactPlayerWrapper, { id: 'video-player', playerType: this.props.playerType, poster: this.props.poster, isFullscreenMode: isFullscreenMode, children: this.props.isLoading ? ((0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { style: { position: 'absolute', left: 0, top: 0 }, height: "100%", width: "100%" })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: error && this.props.playerType !== 'audio' ? ((0, jsx_runtime_1.jsx)(image_1.default, { width: 508, height: 216, alt: 'audioPlaceholder', src: `/assetPage/audioPlaceholder.svg` })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !error && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_player_1.default, { className: "player", id: this.props.playerType, url: url, playing: playing, light: light, volume: volume, playsinline: true, muted: muted, ref: this.ref, controls: false, onPlay: this.handlePlay, onPause: this.handlePause, onError: this.handleErrors, onProgress: this.handleProgress, onDuration: this.handleDuration }), (0, jsx_runtime_1.jsxs)(Controls, { children: [(0, jsx_runtime_1.jsxs)(index_1.Flex, { p: "0 15px 5px", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(Duration_1.default, { seconds: playedSeconds }), (0, jsx_runtime_1.jsx)(Duration_1.default, { seconds: duration })] }), (0, jsx_runtime_1.jsx)(InputRangeVolume, { value: played, children: (0, jsx_runtime_1.jsx)(InputRange, { type: "range", min: 0, max: 0.99, step: "any", value: played, onMouseDown: this.handleSeekMouseDown, onChange: this.handleSeekChange, onMouseUp: this.handleSeekMouseUp }) }), (0, jsx_runtime_1.jsxs)(FlexHelper, { children: [(0, jsx_runtime_1.jsxs)(index_1.Flex, { children: [(0, jsx_runtime_1.jsx)(ControlButton, { style: { marginRight: '45px' }, onClick: this.handlePlayPause, children: (0, jsx_runtime_1.jsx)(image_1.default, { width: 15, height: 15, alt: playing ? 'Play' : 'pause', src: `/assetPage/${playing ? 'pause' : 'play'}.svg` }) }), (0, jsx_runtime_1.jsx)(ControlButton, { style: { marginRight: '20px' }, onClick: this.handleToggleMuted, children: (0, jsx_runtime_1.jsx)(image_1.default, { width: 15, height: 15, alt: 'sound-volume', src: `/assetPage/${volume ? 'soundOn' : 'soundOf'}.svg` }) }), (0, jsx_runtime_1.jsx)(InputRangeSound, { value: volume, children: (0, jsx_runtime_1.jsx)(InputRange, { type: "range", min: 0, max: 1, step: "any", value: volume, onChange: this.handleVolumeChange }) })] }), Boolean(this.props.playerType === 'audio') || ((0, jsx_runtime_1.jsx)(ControlButton, { onClick: this.handleClickFullscreen, children: (0, jsx_runtime_1.jsx)(image_1.default, { width: 15, height: 15, alt: 'fullScreen', src: `/assetPage/fullScreen.svg` }) }))] })] })] })) })) })) }));
+    }
+}
+exports.AudioVideoPlayer = AudioVideoPlayer;

package/build/components/assetPage/category/index.d.ts

@@ -0,0 +1,4 @@
+import { TAsset } from '../../../entities/asset/types';
+export declare const Category: ({ asset }: {
+    asset: TAsset;
+}) => import("react/jsx-runtime").JSX.Element;

package/build/components/assetPage/category/index.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Category = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const vars_1 = require("../../../fonts/vars");
+const env_1 = require("../../../store/env");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const index_1 = require("../../../system/index");
+const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
+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"));
+// Styles
+const StyledBox = (0, styled_components_1.default)(index_1.Box) `
+  text-align: center;
+  width: max-content;
+  background: ${({ theme }) => theme.colors.buttonInactive};
+  transition: all 0.2s ease-in;
+  padding: 8px 16px;
+  border-radius: 6px;
+
+  :hover {
+    background: ${({ theme }) => theme.colors.accentHoverBg};
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    padding: ${(0, _4k_1.adaptiveValueCalc)(8)} ${(0, _4k_1.adaptiveValueCalc)(16)};
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+  }
+`;
+const StyledText = (0, styled_components_1.default)(index_1.Text) `
+  font-family: ${vars_1.poppinsFontVarCss.css};
+
+  font-weight: 500;
+  font-size: 1.5em;
+  line-height: 1.46;
+  color: ${({ theme }) => theme.colors.primaryText};
+
+  ${ScreenWidth_1.mediaQuery.mobile} {
+    font-size: 1.4em;
+    line-height: 1.42;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    font-size: ${(0, _4k_1.adaptiveValueCalc)(15)};
+  }
+`;
+const Category = ({ asset }) => {
+    //update
+    const category = asset.category ?? "all";
+    const categoryLabel = asset.categoryLabel ?? "All";
+    const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
+    return ((0, jsx_runtime_1.jsx)(link_1.default, { style: { display: "block", width: "max-content" }, href: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["search"]}/nfts?category=${category}`, children: (0, jsx_runtime_1.jsx)(StyledBox, { children: (0, jsx_runtime_1.jsx)(StyledText, { children: categoryLabel }) }) }));
+};
+exports.Category = Category;

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

@@ -0,0 +1,5 @@
+export { AssetMedia } from './assetNft';
+export { Properties } from './properties';
+export { Information } from './information';
+export { AudioVideoPlayer } from './audioVideoPlayer';
+export { Viewer3D } from './viewer3D';

package/build/components/assetPage/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Viewer3D = exports.AudioVideoPlayer = exports.Information = exports.Properties = exports.AssetMedia = void 0;
+var assetNft_1 = require("./assetNft");
+Object.defineProperty(exports, "AssetMedia", { enumerable: true, get: function () { return assetNft_1.AssetMedia; } });
+var properties_1 = require("./properties");
+Object.defineProperty(exports, "Properties", { enumerable: true, get: function () { return properties_1.Properties; } });
+var information_1 = require("./information");
+Object.defineProperty(exports, "Information", { enumerable: true, get: function () { return information_1.Information; } });
+var audioVideoPlayer_1 = require("./audioVideoPlayer");
+Object.defineProperty(exports, "AudioVideoPlayer", { enumerable: true, get: function () { return audioVideoPlayer_1.AudioVideoPlayer; } });
+var viewer3D_1 = require("./viewer3D");
+Object.defineProperty(exports, "Viewer3D", { enumerable: true, get: function () { return viewer3D_1.Viewer3D; } });

package/build/components/assetPage/information/index.d.ts

@@ -0,0 +1,4 @@
+import { TAsset } from '../../../entities/asset/types';
+export declare const Information: ({ asset }: {
+    asset: TAsset;
+}) => import("react/jsx-runtime").JSX.Element;

package/build/components/assetPage/information/index.js

@@ -0,0 +1,114 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Information = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const vars_1 = require("../../../fonts/vars");
+const env_1 = require("../../../store/env");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const colors_1 = require("../../../styles/colors");
+const index_1 = require("../../../system/index");
+const copyBtn_1 = require("../../../utils/copyBtn");
+const screen_1 = require("../../../utils/screen");
+const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
+const colors_2 = require("@ludo.ninja/ui/build/styles/colors");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const utils_1 = require("@ludo.ninja/utils");
+const moment_1 = __importDefault(require("moment"));
+const link_1 = __importDefault(require("next/link"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const StyledImage = styled_components_1.default.img `
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    width: ${(0, _4k_1.adaptiveValueCalc)(16)};
+    height: ${(0, _4k_1.adaptiveValueCalc)(16)};
+  }
+`;
+const BoxOverflow = styled_components_1.default.div `
+  text-align: right;
+  white-space: nowrap;
+  width: 90px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    width: ${(0, _4k_1.adaptiveValueCalc)(90)};
+  }
+`;
+const FlexOverflow = (0, styled_components_1.default)(index_1.Flex) `
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 8px;
+
+  * {
+    white-space: nowrap;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    gap: ${(0, _4k_1.adaptiveValueCalc)(8)};
+    margin-bottom: ${(0, _4k_1.adaptiveValueCalc)(8)};
+  }
+`;
+const OverflowH5 = (0, styled_components_1.default)(index_1.H5) `
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+const SBlockchain = (0, styled_components_1.default)(index_1.Flex) `
+  text-align: center;
+  align-items: center;
+  width: max-content;
+  background: ${({ theme }) => theme.colors.buttonInactive};
+  transition: background-color 0.2s ease-in;
+  padding: 4px 8px;
+  border-radius: 6px;
+  gap: 6px;
+
+  p {
+    color: ${colors_2.BlackColor};
+    font-family: ${vars_1.poppinsFontVarCss.css};
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 22px;
+  }
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.accentHoverBg};
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    padding: ${(0, _4k_1.adaptiveValueCalc)(4)} ${(0, _4k_1.adaptiveValueCalc)(8)};
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+    gap: ${(0, _4k_1.adaptiveValueCalc)(6)};
+
+    p {
+      font-size: ${(0, _4k_1.adaptiveValueCalc)(15)};
+      line-height: ${(0, _4k_1.adaptiveValueCalc)(22)};
+    }
+  }
+`;
+const SFlex = (0, styled_components_1.default)(index_1.Flex) `
+  margin-bottom: 8px;
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    margin-bottom: ${(0, _4k_1.adaptiveValueCalc)(8)};
+  }
+`;
+const Information = ({ asset }) => {
+    const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
+    const { tokenId, splitedAssetId: splittedAssetId, address, blockchain: blockChain, blockTimestamp } = asset;
+    const id = tokenId || splittedAssetId;
+    const idTittle = tokenId ? "Token ID" : "ID";
+    const { deviceType } = (0, screen_1.useWindowDimensions)();
+    const isDesktop = deviceType === "isDesktop";
+    const styleOverflow = isDesktop ? { overflow: "hidden" } : undefined;
+    const getStaticENVDomain = (0, env_1.useEnvStore)((state) => state.getStaticDomain);
+    return ((0, jsx_runtime_1.jsxs)(index_1.Flex, { flexDirection: "column", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(SFlex, { justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(index_1.H5, { color: colors_1.TextGrayColor, children: "Blockchain" }), (0, jsx_runtime_1.jsx)(link_1.default, { href: `${ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["search"]}/nfts?blockchain=${blockChain.getBlockChainPrivateLabel()}`, children: (0, jsx_runtime_1.jsxs)(SBlockchain, { children: [(0, jsx_runtime_1.jsx)("p", { children: blockChain.getBlockChainPublicLabel() }), (0, jsx_runtime_1.jsx)(StyledImage, { width: 16, height: 16, src: blockChain.getBlockChainIconRegular({
+                                        domain: getStaticENVDomain(),
+                                    }), alt: blockChain.getBlockChainPublicLabel() })] }) })] }), address && ((0, jsx_runtime_1.jsxs)(FlexOverflow, { children: [(0, jsx_runtime_1.jsx)(index_1.H5, { color: colors_1.TextGrayColor, children: "Contract Address" }), (0, jsx_runtime_1.jsx)(copyBtn_1.CopyButton, { value: address, style: styleOverflow, children: isDesktop ? ((0, jsx_runtime_1.jsx)(OverflowH5, { color: colors_1.AccentColor, title: address, children: address })) : ((0, jsx_runtime_1.jsx)(index_1.H5, { color: colors_1.AccentColor, title: address, children: (0, utils_1.shortenedText)(address) })) })] })), (0, jsx_runtime_1.jsxs)(FlexOverflow, { children: [(0, jsx_runtime_1.jsx)(index_1.H5, { color: colors_1.TextGrayColor, children: idTittle }), (0, jsx_runtime_1.jsx)(copyBtn_1.CopyButton, { value: id, style: styleOverflow, children: isDesktop ? ((0, jsx_runtime_1.jsx)(OverflowH5, { color: colors_1.AccentColor, title: id, children: id })) : ((0, jsx_runtime_1.jsx)(BoxOverflow, { children: (0, jsx_runtime_1.jsx)(index_1.H5, { color: colors_1.AccentColor, title: id, children: (0, jsx_runtime_1.jsx)(BoxOverflow, { children: id }) }) })) })] }), blockTimestamp && ((0, jsx_runtime_1.jsxs)(SFlex, { justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(index_1.H5, { color: colors_1.TextGrayColor, children: "Added on" }), (0, jsx_runtime_1.jsx)(index_1.H5, { color: colors_1.TextGrayColor, children: (0, moment_1.default)(blockTimestamp * 1000).format("LL") })] }))] }));
+};
+exports.Information = Information;

package/build/components/assetPage/marketPlaces/index.d.ts

@@ -0,0 +1,4 @@
+import { MarketPlaceEntity } from '@ludo.ninja/core';
+export declare const MarketPlaces: ({ markets }: {
+    markets: MarketPlaceEntity[];
+}) => import("react/jsx-runtime").JSX.Element;

package/build/components/assetPage/marketPlaces/index.js

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MarketPlaces = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const image_1 = __importDefault(require("next/image"));
+const link_1 = __importDefault(require("next/link"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const env_1 = require("../../../store/env");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const boxShadow_1 = __importDefault(require("../../../styles/mixins/boxShadow"));
+const boxTransform_1 = __importDefault(require("../../../styles/mixins/boxTransform"));
+const Container = styled_components_1.default.div `
+  margin: 30px 0 0 0;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  ${ScreenWidth_1.mediaQuery.tablet} {
+    margin: 20px 0 0;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    margin: ${(0, _4k_1.adaptiveValueCalc)(30)} 0 0 0;
+  }
+`;
+const StyledImage = (0, styled_components_1.default)(image_1.default) `
+  ${boxShadow_1.default};
+  ${boxTransform_1.default};
+  border-radius: 6px;
+  margin: 0 7px 6px 0;
+  width: 40px;
+  height: 40px;
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+    margin: 0 ${(0, _4k_1.adaptiveValueCalc)(7)} ${(0, _4k_1.adaptiveValueCalc)(6)} 0;
+    width: ${(0, _4k_1.adaptiveValueCalc)(40)};
+    height: ${(0, _4k_1.adaptiveValueCalc)(40)};
+  }
+`;
+const MarketLinkWrapper = ({ market, children, }) => {
+    if (market.getMarketPlaceUrl()) {
+        return ((0, jsx_runtime_1.jsx)(link_1.default, { target: "_blank", title: market.getMarketPlaceName(), href: market.getMarketPlaceUrl(), children: children }));
+    }
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+};
+const MarketPlaces = ({ markets }) => {
+    const getStaticENVDomain = (0, env_1.useEnvStore)((state) => state.getStaticDomain);
+    return ((0, jsx_runtime_1.jsx)(Container, { children: markets?.map((market) => ((0, jsx_runtime_1.jsx)(MarketLinkWrapper, { market: market, children: (0, jsx_runtime_1.jsx)(StyledImage, { width: 40, height: 40, src: market.getMarketPlaceIconRegular({
+                    domain: getStaticENVDomain(),
+                }), alt: market.getMarketPlaceName() }) }, market.getMarketPlaceId()))) }));
+};
+exports.MarketPlaces = MarketPlaces;

package/build/components/assetPage/media/AssetImage/index.d.ts

@@ -0,0 +1,8 @@
+declare const AssetImage: ({ imageUrl, errorImg, originalUrl, alt, isScreenshot, }: {
+    imageUrl: string;
+    errorImg: string;
+    alt: string;
+    originalUrl?: string | null | undefined;
+    isScreenshot?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default AssetImage;