@ludo.ninja/components 1.1.1 → 1.1.3

package/dist/components/assetPage/information/index.jsx

@@ -1,239 +1,87 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React from 'react';
-
 import Link from 'next/link';
-
 import moment from 'moment';
 import styled from 'styled-components';
-
 import { BlackColor } from '@ludo.ninja/ui/build/styles/colors';
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
 import { shortenedText } from '@ludo.ninja/utils';
-
 import { mediaQuery } from '@/styles/ScreenWidth';
 import { AccentColor, TextGrayColor } from '@/styles/colors';
-
 import { Flex, H5 } from '@system';
-
 import { CopyButton } from '@/utils/copyBtn';
 import { getStaticENVDomain } from '@/utils/env';
 import { useWindowDimensions } from '@/utils/screen';
-
 import { poppinsFontVarCss } from '@/fonts/vars';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
-var StyledImage = styled.img(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  border-radius: 50%;\n  width: 16px;\n  height: 16px;\n  ',
-        ' {\n    width: ',
-        ';\n    height: ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  border-radius: 50%;\n  width: 16px;\n  height: 16px;\n  ',
-        ' {\n    width: ',
-        ';\n    height: ',
-        ';\n  }\n',
-      ]
-    )),
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(16),
-  adaptiveValueCalc(16)
-);
-var BoxOverflow = styled.div(
-  templateObject_2 ||
-    (templateObject_2 = __makeTemplateObject(
-      [
-        '\n  text-align: right;\n  white-space: nowrap;\n  width: 90px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  ',
-        ' {\n    width: ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  text-align: right;\n  white-space: nowrap;\n  width: 90px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  ',
-        ' {\n    width: ',
-        ';\n  }\n',
-      ]
-    )),
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(90)
-);
-var FlexOverflow = styled(Flex)(
-  templateObject_3 ||
-    (templateObject_3 = __makeTemplateObject(
-      [
-        '\n  justify-content: space-between;\n  gap: 8px;\n  margin-bottom: 8px;\n\n  * {\n    white-space: nowrap;\n  }\n\n  ',
-        ' {\n    gap: ',
-        ';\n    margin-bottom: ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  justify-content: space-between;\n  gap: 8px;\n  margin-bottom: 8px;\n\n  * {\n    white-space: nowrap;\n  }\n\n  ',
-        ' {\n    gap: ',
-        ';\n    margin-bottom: ',
-        ';\n  }\n',
-      ]
-    )),
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(8),
-  adaptiveValueCalc(8)
-);
-var OverflowH5 = styled(H5)(
-  templateObject_4 ||
-    (templateObject_4 = __makeTemplateObject(
-      ['\n  text-overflow: ellipsis;\n  overflow: hidden;\n'],
-      ['\n  text-overflow: ellipsis;\n  overflow: hidden;\n']
-    ))
-);
-var SBlockchain = styled(Flex)(
-  templateObject_5 ||
-    (templateObject_5 = __makeTemplateObject(
-      [
-        '\n  text-align: center;\n  align-items: center;\n  width: max-content;\n  background: ',
-        ';\n  transition: background-color 0.2s ease-in;\n  padding: 4px 8px;\n  border-radius: 6px;\n  gap: 6px;\n\n  p {\n    color: ',
-        ';\n    font-family: ',
-        ';\n    font-size: 15px;\n    font-weight: 500;\n    line-height: 22px;\n  }\n\n  &:hover {\n    background: ',
-        ';\n  }\n\n  ',
-        ' {\n    padding: ',
-        ' ',
-        ';\n    border-radius: ',
-        ';\n    gap: ',
-        ';\n\n    p {\n      font-size: ',
-        ';\n      line-height: ',
-        ';\n    }\n  }\n',
-      ],
-      [
-        '\n  text-align: center;\n  align-items: center;\n  width: max-content;\n  background: ',
-        ';\n  transition: background-color 0.2s ease-in;\n  padding: 4px 8px;\n  border-radius: 6px;\n  gap: 6px;\n\n  p {\n    color: ',
-        ';\n    font-family: ',
-        ';\n    font-size: 15px;\n    font-weight: 500;\n    line-height: 22px;\n  }\n\n  &:hover {\n    background: ',
-        ';\n  }\n\n  ',
-        ' {\n    padding: ',
-        ' ',
-        ';\n    border-radius: ',
-        ';\n    gap: ',
-        ';\n\n    p {\n      font-size: ',
-        ';\n      line-height: ',
-        ';\n    }\n  }\n',
-      ]
-    )),
-  function (_a) {
+var StyledImage = styled.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 50%;\n  width: 16px;\n  height: 16px;\n  ", " {\n    width: ", ";\n    height: ", ";\n  }\n"], ["\n  border-radius: 50%;\n  width: 16px;\n  height: 16px;\n  ", " {\n    width: ", ";\n    height: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(16), adaptiveValueCalc(16));
+var BoxOverflow = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  text-align: right;\n  white-space: nowrap;\n  width: 90px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  ", " {\n    width: ", ";\n  }\n"], ["\n  text-align: right;\n  white-space: nowrap;\n  width: 90px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  ", " {\n    width: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(90));
+var FlexOverflow = styled(Flex)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  justify-content: space-between;\n  gap: 8px;\n  margin-bottom: 8px;\n\n  * {\n    white-space: nowrap;\n  }\n\n  ", " {\n    gap: ", ";\n    margin-bottom: ", ";\n  }\n"], ["\n  justify-content: space-between;\n  gap: 8px;\n  margin-bottom: 8px;\n\n  * {\n    white-space: nowrap;\n  }\n\n  ", " {\n    gap: ", ";\n    margin-bottom: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(8), adaptiveValueCalc(8));
+var OverflowH5 = styled(H5)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  text-overflow: ellipsis;\n  overflow: hidden;\n"], ["\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
+var SBlockchain = styled(Flex)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  text-align: center;\n  align-items: center;\n  width: max-content;\n  background: ", ";\n  transition: background-color 0.2s ease-in;\n  padding: 4px 8px;\n  border-radius: 6px;\n  gap: 6px;\n\n  p {\n    color: ", ";\n    font-family: ", ";\n    font-size: 15px;\n    font-weight: 500;\n    line-height: 22px;\n  }\n\n  &:hover {\n    background: ", ";\n  }\n\n  ", " {\n    padding: ", " ", ";\n    border-radius: ", ";\n    gap: ", ";\n\n    p {\n      font-size: ", ";\n      line-height: ", ";\n    }\n  }\n"], ["\n  text-align: center;\n  align-items: center;\n  width: max-content;\n  background: ", ";\n  transition: background-color 0.2s ease-in;\n  padding: 4px 8px;\n  border-radius: 6px;\n  gap: 6px;\n\n  p {\n    color: ", ";\n    font-family: ", ";\n    font-size: 15px;\n    font-weight: 500;\n    line-height: 22px;\n  }\n\n  &:hover {\n    background: ", ";\n  }\n\n  ", " {\n    padding: ", " ", ";\n    border-radius: ", ";\n    gap: ", ";\n\n    p {\n      font-size: ", ";\n      line-height: ", ";\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.colors.buttonInactive;
-  },
-  BlackColor,
-  poppinsFontVarCss.css,
-  function (_a) {
+}, BlackColor, poppinsFontVarCss.css, function (_a) {
     var theme = _a.theme;
     return theme.colors.accentHoverBg;
-  },
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(4),
-  adaptiveValueCalc(8),
-  adaptiveValueCalc(6),
-  adaptiveValueCalc(6),
-  adaptiveValueCalc(15),
-  adaptiveValueCalc(22)
-);
-var SFlex = styled(Flex)(
-  templateObject_6 ||
-    (templateObject_6 = __makeTemplateObject(
-      ['\n  margin-bottom: 8px;\n\n  ', ' {\n    margin-bottom: ', ';\n  }\n'],
-      ['\n  margin-bottom: 8px;\n\n  ', ' {\n    margin-bottom: ', ';\n  }\n']
-    )),
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(8)
-);
+}, mediaQuery.minWidthFourK, adaptiveValueCalc(4), adaptiveValueCalc(8), adaptiveValueCalc(6), adaptiveValueCalc(6), adaptiveValueCalc(15), adaptiveValueCalc(22));
+var SFlex = styled(Flex)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-bottom: 8px;\n\n  ", " {\n    margin-bottom: ", ";\n  }\n"], ["\n  margin-bottom: 8px;\n\n  ", " {\n    margin-bottom: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(8));
 export var Information = function (_a) {
-  var asset = _a.asset;
-  var tokenId = asset.getTokenId();
-  var splittedAssetId = asset.getSplitedAssetId();
-  var address = asset.getAddress();
-  var blockChain = asset.getBlockchain();
-  var blockTimestamp = asset.getBlockTimestamp();
-  var id = tokenId ? tokenId : splittedAssetId;
-  var idTittle = tokenId ? 'Token ID' : 'ID';
-  var deviceType = useWindowDimensions().deviceType;
-  var isDesktop = deviceType === 'isDesktop';
-  var styleOverflow = isDesktop ? { overflow: 'hidden' } : undefined;
-  return (
-    <Flex flexDirection="column" justifyContent="space-between">
+    var asset = _a.asset;
+    var tokenId = asset.getTokenId();
+    var splittedAssetId = asset.getSplitedAssetId();
+    var address = asset.getAddress();
+    var blockChain = asset.getBlockchain();
+    var blockTimestamp = asset.getBlockTimestamp();
+    var id = tokenId ? tokenId : splittedAssetId;
+    var idTittle = tokenId ? 'Token ID' : 'ID';
+    var deviceType = useWindowDimensions().deviceType;
+    var isDesktop = deviceType === 'isDesktop';
+    var styleOverflow = isDesktop
+        ? { overflow: 'hidden' }
+        : undefined;
+    return (<Flex flexDirection="column" justifyContent="space-between">
       <SFlex justifyContent="space-between" alignItems="center">
         <H5 color={TextGrayColor}>Blockchain</H5>
-        <Link
-          href={'/search/nfts?blockchain='.concat(
-            blockChain.getBlockChainPrivateLabel()
-          )}
-        >
+        <Link href={"/search/nfts?blockchain=".concat(blockChain.getBlockChainPrivateLabel())}>
           <SBlockchain>
             <p>{blockChain.getBlockChainPublicLabel()}</p>
-            <StyledImage
-              width={16}
-              height={16}
-              src={blockChain.getBlockChainIconRegular({
-                domain: getStaticENVDomain(),
-              })}
-              alt={blockChain.getBlockChainPublicLabel()}
-            />
+            <StyledImage width={16} height={16} src={blockChain.getBlockChainIconRegular({
+            domain: getStaticENVDomain(),
+        })} alt={blockChain.getBlockChainPublicLabel()}/>
           </SBlockchain>
         </Link>
       </SFlex>
-      {address && (
-        <FlexOverflow>
+      {address && (<FlexOverflow>
           <H5 color={TextGrayColor}>Contract Address</H5>
           <CopyButton value={address} style={styleOverflow}>
-            {isDesktop ? (
-              <OverflowH5 color={AccentColor} title={address}>
+            {isDesktop ? (<OverflowH5 color={AccentColor} title={address}>
                 {address}
-              </OverflowH5>
-            ) : (
-              <H5 color={AccentColor} title={address}>
+              </OverflowH5>) : (<H5 color={AccentColor} title={address}>
                 {shortenedText(address)}
-              </H5>
-            )}
+              </H5>)}
           </CopyButton>
-        </FlexOverflow>
-      )}
+        </FlexOverflow>)}
       <FlexOverflow>
         <H5 color={TextGrayColor}>{idTittle}</H5>
         <CopyButton value={id} style={styleOverflow}>
-          {isDesktop ? (
-            <OverflowH5 color={AccentColor} title={id}>
+          {isDesktop ? (<OverflowH5 color={AccentColor} title={id}>
               {id}
-            </OverflowH5>
-          ) : (
-            <BoxOverflow>
+            </OverflowH5>) : (<BoxOverflow>
               <H5 color={AccentColor} title={id}>
                 <BoxOverflow>{id}</BoxOverflow>
               </H5>
-            </BoxOverflow>
-          )}
+            </BoxOverflow>)}
         </CopyButton>
       </FlexOverflow>
-      {blockTimestamp && (
-        <SFlex justifyContent="space-between">
+      {blockTimestamp && (<SFlex justifyContent="space-between">
           <H5 color={TextGrayColor}>Added on</H5>
           <H5 color={TextGrayColor}>
             {moment(blockTimestamp * 1000).format('LL')}
           </H5>
-        </SFlex>
-      )}
-    </Flex>
-  );
+        </SFlex>)}
+    </Flex>);
 };
-var templateObject_1,
-  templateObject_2,
-  templateObject_3,
-  templateObject_4,
-  templateObject_5,
-  templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/assetPage/marketPlaces/index.jsx

@@ -1,124 +1,35 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React from 'react';
-
 import Image from 'next/image';
 import Link from 'next/link';
-
 import styled from 'styled-components';
-
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
 import { mediaQuery } from '@/styles/ScreenWidth';
 import BoxShadow from '@/styles/mixins/boxShadow';
 import BoxTransform from '@/styles/mixins/boxTransform';
-
 import { getStaticENVDomain } from '@/utils/env';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
-var Container = styled.div(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  margin: 30px 0 0 0;\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n\n  ',
-        ' {\n    margin: 20px 0 0;\n  }\n\n  ',
-        ' {\n    margin: ',
-        ' 0 0 0;\n  }\n',
-      ],
-      [
-        '\n  margin: 30px 0 0 0;\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n\n  ',
-        ' {\n    margin: 20px 0 0;\n  }\n\n  ',
-        ' {\n    margin: ',
-        ' 0 0 0;\n  }\n',
-      ]
-    )),
-  mediaQuery.tablet,
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(30)
-);
-var StyledImage = styled(Image)(
-  templateObject_2 ||
-    (templateObject_2 = __makeTemplateObject(
-      [
-        '\n  ',
-        ';\n  ',
-        ';\n  border-radius: 6px;\n  margin: 0 7px 6px 0;\n  width: 40px;\n  height: 40px;\n\n  ',
-        ' {\n    border-radius: ',
-        ';\n    margin: 0 ',
-        ' ',
-        ' 0;\n    width: ',
-        ';\n    height: ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  ',
-        ';\n  ',
-        ';\n  border-radius: 6px;\n  margin: 0 7px 6px 0;\n  width: 40px;\n  height: 40px;\n\n  ',
-        ' {\n    border-radius: ',
-        ';\n    margin: 0 ',
-        ' ',
-        ' 0;\n    width: ',
-        ';\n    height: ',
-        ';\n  }\n',
-      ]
-    )),
-  BoxShadow,
-  BoxTransform,
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(6),
-  adaptiveValueCalc(7),
-  adaptiveValueCalc(6),
-  adaptiveValueCalc(40),
-  adaptiveValueCalc(40)
-);
+var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 30px 0 0 0;\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n\n  ", " {\n    margin: 20px 0 0;\n  }\n\n  ", " {\n    margin: ", " 0 0 0;\n  }\n"], ["\n  margin: 30px 0 0 0;\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n\n  ", " {\n    margin: 20px 0 0;\n  }\n\n  ", " {\n    margin: ", " 0 0 0;\n  }\n"])), mediaQuery.tablet, mediaQuery.minWidthFourK, adaptiveValueCalc(30));
+var StyledImage = styled(Image)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  border-radius: 6px;\n  margin: 0 7px 6px 0;\n  width: 40px;\n  height: 40px;\n\n  ", " {\n    border-radius: ", ";\n    margin: 0 ", " ", " 0;\n    width: ", ";\n    height: ", ";\n  }\n"], ["\n  ", ";\n  ", ";\n  border-radius: 6px;\n  margin: 0 7px 6px 0;\n  width: 40px;\n  height: 40px;\n\n  ", " {\n    border-radius: ", ";\n    margin: 0 ", " ", " 0;\n    width: ", ";\n    height: ", ";\n  }\n"])), BoxShadow, BoxTransform, mediaQuery.minWidthFourK, adaptiveValueCalc(6), adaptiveValueCalc(7), adaptiveValueCalc(6), adaptiveValueCalc(40), adaptiveValueCalc(40));
 var MarketLinkWrapper = function (_a) {
-  var market = _a.market,
-    children = _a.children;
-  if (market.getMarketPlaceUrl()) {
-    return (
-      <Link
-        target="_blank"
-        title={market.getMarketPlaceName()}
-        href={market.getMarketPlaceUrl()}
-      >
+    var market = _a.market, children = _a.children;
+    if (market.getMarketPlaceUrl()) {
+        return (<Link target="_blank" title={market.getMarketPlaceName()} href={market.getMarketPlaceUrl()}>
         {children}
-      </Link>
-    );
-  }
-  return <>{children}</>;
+      </Link>);
+    }
+    return <>{children}</>;
 };
 export var MarketPlaces = function (_a) {
-  var markets = _a.markets;
-  return (
-    <Container>
-      {markets === null || markets === void 0
-        ? void 0
-        : markets.map(function (market) {
-            return (
-              <MarketLinkWrapper
-                key={market.getMarketPlaceId()}
-                market={market}
-              >
-                <StyledImage
-                  width={40}
-                  height={40}
-                  src={market.getMarketPlaceIconRegular({
-                    domain: getStaticENVDomain(),
-                  })}
-                  alt={market.getMarketPlaceName()}
-                />
-              </MarketLinkWrapper>
-            );
-          })}
-    </Container>
-  );
+    var markets = _a.markets;
+    return (<Container>
+    {markets === null || markets === void 0 ? void 0 : markets.map(function (market) { return (<MarketLinkWrapper key={market.getMarketPlaceId()} market={market}>
+        <StyledImage width={40} height={40} src={market.getMarketPlaceIconRegular({
+                domain: getStaticENVDomain(),
+            })} alt={market.getMarketPlaceName()}/>
+      </MarketLinkWrapper>); })}
+  </Container>);
 };
 var templateObject_1, templateObject_2;