@ton/appkit-react 0.0.1-alpha.2 → 0.0.1

package/dist/features/nft/components/nft-item/index.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var nftItem = require('./nft-item');
+
+
+
+Object.keys(nftItem).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return nftItem[k]; }
+	});
+});
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/features/nft/components/nft-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/dist/features/nft/components/nft-item/index.mjs

@@ -0,0 +1,3 @@
+export * from './nft-item';
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/features/nft/components/nft-item/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.mjs","sourcesContent":[]}

package/dist/features/nft/components/nft-item/nft-item.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { NFT } from '@ton/appkit';
+import type { FC, ComponentProps } from 'react';
+export interface NftItemProps extends ComponentProps<'button'> {
+    nft: NFT;
+}
+export declare const NftItem: FC<NftItemProps>;
+//# sourceMappingURL=nft-item.d.ts.map

package/dist/features/nft/components/nft-item/nft-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nft-item.d.ts","sourceRoot":"","sources":["../../../../../src/features/nft/components/nft-item/nft-item.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAkBhD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,QAAQ,CAAC;IAC1D,GAAG,EAAE,GAAG,CAAC;CACZ;AAED,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAwBpC,CAAC"}

package/dist/features/nft/components/nft-item/nft-item.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var appkit = require('@ton/appkit');
+var clsx = require('clsx');
+var useI18n = require('../../../../hooks/use-i18n');
+var styles = require('./nft-item.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const PlaceholderIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: styles__default.default.placeholderIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+  }
+) });
+const NftItem = ({ nft, className, ...props }) => {
+  const { t } = useI18n.useI18n();
+  const { name, collectionName, image, isOnSale } = react.useMemo(() => appkit.getFormattedNftInfo(nft), [nft]);
+  const [imageError, setImageError] = react.useState(false);
+  const showImage = image && !imageError;
+  return /* @__PURE__ */ jsxRuntime.jsxs("button", { className: clsx__default.default(styles__default.default.nftItem, className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.imageWrapper, children: [
+      showImage ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: image, alt: name, className: styles__default.default.image, onError: () => setImageError(true) }) : /* @__PURE__ */ jsxRuntime.jsx(PlaceholderIcon, {}),
+      isOnSale && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.saleBadge, children: t("nft.onSale") })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.info, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h4", { className: styles__default.default.name, children: name }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles__default.default.collectionName, children: collectionName })
+    ] })
+  ] });
+};
+
+exports.NftItem = NftItem;
+//# sourceMappingURL=nft-item.js.map
+//# sourceMappingURL=nft-item.js.map

package/dist/features/nft/components/nft-item/nft-item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/features/nft/components/nft-item/nft-item.tsx"],"names":["jsx","styles","useI18n","useMemo","getFormattedNftInfo","useState","jsxs","clsx"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,eAAA,GAAsB,sBACxBA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,uBAAA,CAAO,eAAA,EAAiB,IAAA,EAAK,MAAA,EAAO,MAAA,EAAO,cAAA,EAAe,OAAA,EAAQ,WAAA,EAC9E,QAAA,kBAAAD,cAAA;AAAA,EAAC,MAAA;AAAA,EAAA;AAAA,IACG,aAAA,EAAc,OAAA;AAAA,IACd,cAAA,EAAe,OAAA;AAAA,IACf,WAAA,EAAa,CAAA;AAAA,IACb,CAAA,EAAE;AAAA;AACN,CAAA,EACJ,CAAA;AAOG,MAAM,UAA4B,CAAC,EAAE,KAAK,SAAA,EAAW,GAAG,OAAM,KAAM;AACvE,EAAA,MAAM,EAAE,CAAA,EAAE,GAAIE,eAAA,EAAQ;AACtB,EAAA,MAAM,EAAE,IAAA,EAAM,cAAA,EAAgB,KAAA,EAAO,QAAA,EAAS,GAAIC,aAAA,CAAQ,MAAMC,0BAAA,CAAoB,GAAG,CAAA,EAAG,CAAC,GAAG,CAAC,CAAA;AAC/F,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIC,eAAS,KAAK,CAAA;AAElD,EAAA,MAAM,SAAA,GAAY,SAAS,CAAC,UAAA;AAE5B,EAAA,uBACIC,eAAA,CAAC,YAAO,SAAA,EAAWC,qBAAA,CAAKN,wBAAO,OAAA,EAAS,SAAS,CAAA,EAAI,GAAG,KAAA,EACpD,QAAA,EAAA;AAAA,oBAAAK,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWL,uBAAA,CAAO,YAAA,EAClB,QAAA,EAAA;AAAA,MAAA,SAAA,kCACI,KAAA,EAAA,EAAI,GAAA,EAAK,KAAA,EAAO,GAAA,EAAK,MAAM,SAAA,EAAWA,uBAAA,CAAO,KAAA,EAAO,OAAA,EAAS,MAAM,aAAA,CAAc,IAAI,CAAA,EAAG,CAAA,kCAExF,eAAA,EAAA,EAAgB,CAAA;AAAA,MAEpB,QAAA,mCAAa,MAAA,EAAA,EAAK,SAAA,EAAWA,wBAAO,SAAA,EAAY,QAAA,EAAA,CAAA,CAAE,YAAY,CAAA,EAAE;AAAA,KAAA,EACrE,CAAA;AAAA,oBAEAK,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWL,uBAAA,CAAO,IAAA,EACnB,QAAA,EAAA;AAAA,sBAAAD,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAWC,uBAAA,CAAO,IAAA,EAAO,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,sBAClCD,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAWC,uBAAA,CAAO,gBAAiB,QAAA,EAAA,cAAA,EAAe;AAAA,KAAA,EACzD;AAAA,GAAA,EACJ,CAAA;AAER","file":"nft-item.js","sourcesContent":["/**\n * Copyright (c) TonTech.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { NFT } from '@ton/appkit';\nimport { useMemo, useState } from 'react';\nimport type { FC, ComponentProps } from 'react';\nimport { getFormattedNftInfo } from '@ton/appkit';\nimport clsx from 'clsx';\n\nimport { useI18n } from '../../../../hooks/use-i18n';\nimport styles from './nft-item.module.css';\n\nconst PlaceholderIcon: FC = () => (\n    <svg className={styles.placeholderIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\n        />\n    </svg>\n);\n\nexport interface NftItemProps extends ComponentProps<'button'> {\n    nft: NFT;\n}\n\nexport const NftItem: FC<NftItemProps> = ({ nft, className, ...props }) => {\n    const { t } = useI18n();\n    const { name, collectionName, image, isOnSale } = useMemo(() => getFormattedNftInfo(nft), [nft]);\n    const [imageError, setImageError] = useState(false);\n\n    const showImage = image && !imageError;\n\n    return (\n        <button className={clsx(styles.nftItem, className)} {...props}>\n            <div className={styles.imageWrapper}>\n                {showImage ? (\n                    <img src={image} alt={name} className={styles.image} onError={() => setImageError(true)} />\n                ) : (\n                    <PlaceholderIcon />\n                )}\n                {isOnSale && <span className={styles.saleBadge}>{t('nft.onSale')}</span>}\n            </div>\n\n            <div className={styles.info}>\n                <h4 className={styles.name}>{name}</h4>\n                <p className={styles.collectionName}>{collectionName}</p>\n            </div>\n        </button>\n    );\n};\n"]}

package/dist/features/nft/components/nft-item/nft-item.mjs

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo, useState } from 'react';
+import { getFormattedNftInfo } from '@ton/appkit';
+import clsx from 'clsx';
+import { useI18n } from '../../../../hooks/use-i18n';
+import styles from './nft-item.module.css';
+
+const PlaceholderIcon = () => /* @__PURE__ */ jsx("svg", { className: styles.placeholderIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+  }
+) });
+const NftItem = ({ nft, className, ...props }) => {
+  const { t } = useI18n();
+  const { name, collectionName, image, isOnSale } = useMemo(() => getFormattedNftInfo(nft), [nft]);
+  const [imageError, setImageError] = useState(false);
+  const showImage = image && !imageError;
+  return /* @__PURE__ */ jsxs("button", { className: clsx(styles.nftItem, className), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.imageWrapper, children: [
+      showImage ? /* @__PURE__ */ jsx("img", { src: image, alt: name, className: styles.image, onError: () => setImageError(true) }) : /* @__PURE__ */ jsx(PlaceholderIcon, {}),
+      isOnSale && /* @__PURE__ */ jsx("span", { className: styles.saleBadge, children: t("nft.onSale") })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: styles.info, children: [
+      /* @__PURE__ */ jsx("h4", { className: styles.name, children: name }),
+      /* @__PURE__ */ jsx("p", { className: styles.collectionName, children: collectionName })
+    ] })
+  ] });
+};
+
+export { NftItem };
+//# sourceMappingURL=nft-item.mjs.map
+//# sourceMappingURL=nft-item.mjs.map

package/dist/features/nft/components/nft-item/nft-item.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/features/nft/components/nft-item/nft-item.tsx"],"names":[],"mappings":";;;;;;;AAiBA,MAAM,eAAA,GAAsB,sBACxB,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,eAAA,EAAiB,IAAA,EAAK,MAAA,EAAO,MAAA,EAAO,cAAA,EAAe,OAAA,EAAQ,WAAA,EAC9E,QAAA,kBAAA,GAAA;AAAA,EAAC,MAAA;AAAA,EAAA;AAAA,IACG,aAAA,EAAc,OAAA;AAAA,IACd,cAAA,EAAe,OAAA;AAAA,IACf,WAAA,EAAa,CAAA;AAAA,IACb,CAAA,EAAE;AAAA;AACN,CAAA,EACJ,CAAA;AAOG,MAAM,UAA4B,CAAC,EAAE,KAAK,SAAA,EAAW,GAAG,OAAM,KAAM;AACvE,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,OAAA,EAAQ;AACtB,EAAA,MAAM,EAAE,IAAA,EAAM,cAAA,EAAgB,KAAA,EAAO,QAAA,EAAS,GAAI,OAAA,CAAQ,MAAM,mBAAA,CAAoB,GAAG,CAAA,EAAG,CAAC,GAAG,CAAC,CAAA;AAC/F,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA;AAElD,EAAA,MAAM,SAAA,GAAY,SAAS,CAAC,UAAA;AAE5B,EAAA,uBACI,IAAA,CAAC,YAAO,SAAA,EAAW,IAAA,CAAK,OAAO,OAAA,EAAS,SAAS,CAAA,EAAI,GAAG,KAAA,EACpD,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,YAAA,EAClB,QAAA,EAAA;AAAA,MAAA,SAAA,uBACI,KAAA,EAAA,EAAI,GAAA,EAAK,KAAA,EAAO,GAAA,EAAK,MAAM,SAAA,EAAW,MAAA,CAAO,KAAA,EAAO,OAAA,EAAS,MAAM,aAAA,CAAc,IAAI,CAAA,EAAG,CAAA,uBAExF,eAAA,EAAA,EAAgB,CAAA;AAAA,MAEpB,QAAA,wBAAa,MAAA,EAAA,EAAK,SAAA,EAAW,OAAO,SAAA,EAAY,QAAA,EAAA,CAAA,CAAE,YAAY,CAAA,EAAE;AAAA,KAAA,EACrE,CAAA;AAAA,oBAEA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,IAAA,EACnB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAW,MAAA,CAAO,IAAA,EAAO,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,sBAClC,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAW,MAAA,CAAO,gBAAiB,QAAA,EAAA,cAAA,EAAe;AAAA,KAAA,EACzD;AAAA,GAAA,EACJ,CAAA;AAER","file":"nft-item.mjs","sourcesContent":["/**\n * Copyright (c) TonTech.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { NFT } from '@ton/appkit';\nimport { useMemo, useState } from 'react';\nimport type { FC, ComponentProps } from 'react';\nimport { getFormattedNftInfo } from '@ton/appkit';\nimport clsx from 'clsx';\n\nimport { useI18n } from '../../../../hooks/use-i18n';\nimport styles from './nft-item.module.css';\n\nconst PlaceholderIcon: FC = () => (\n    <svg className={styles.placeholderIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\n        />\n    </svg>\n);\n\nexport interface NftItemProps extends ComponentProps<'button'> {\n    nft: NFT;\n}\n\nexport const NftItem: FC<NftItemProps> = ({ nft, className, ...props }) => {\n    const { t } = useI18n();\n    const { name, collectionName, image, isOnSale } = useMemo(() => getFormattedNftInfo(nft), [nft]);\n    const [imageError, setImageError] = useState(false);\n\n    const showImage = image && !imageError;\n\n    return (\n        <button className={clsx(styles.nftItem, className)} {...props}>\n            <div className={styles.imageWrapper}>\n                {showImage ? (\n                    <img src={image} alt={name} className={styles.image} onError={() => setImageError(true)} />\n                ) : (\n                    <PlaceholderIcon />\n                )}\n                {isOnSale && <span className={styles.saleBadge}>{t('nft.onSale')}</span>}\n            </div>\n\n            <div className={styles.info}>\n                <h4 className={styles.name}>{name}</h4>\n                <p className={styles.collectionName}>{collectionName}</p>\n            </div>\n        </button>\n    );\n};\n"]}

package/dist/features/nft/components/nft-item/nft-item.module.css

@@ -0,0 +1,65 @@
+.nftItem {
+  box-sizing: border-box;
+  width: 100%;
+  background-color: var(--ta-color-background-secondary);
+  border-radius: var(--ta-border-radius-l);
+  overflow: hidden;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  padding: 0;
+}
+.imageWrapper {
+  position: relative;
+  aspect-ratio: 1 / 1;
+  background-color: var(--ta-color-background-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.placeholderIcon {
+  width: 32px;
+  height: 32px;
+  color: var(--ta-color-text-secondary);
+}
+.info {
+  padding: 8px;
+  text-align: left;
+}
+.name {
+  composes: bodySmall from "../../../../styles/typography.module.css";
+  color: var(--ta-color-text);
+  font-weight: var(--ta-body-medium-font-weight);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+}
+.collectionName {
+  composes: bodySmall from "../../../../styles/typography.module.css";
+  color: var(--ta-color-text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+}
+.saleBadge {
+  composes: caption2 from "../../../../styles/typography.module.css";
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 6px;
+  border-radius: var(--ta-border-radius-s);
+  font-weight: var(--ta-body-medium-font-weight);
+  background-color: var(--ta-color-primary);
+  color: var(--ta-color-text-on-primary, #fff);
+}
+/*# sourceMappingURL=nft-item.module.css.map */

package/dist/features/nft/components/nft-item/nft-item.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/features/nft/components/nft-item/nft-item.module.css"],"sourcesContent":[".nftItem {\n    box-sizing: border-box;\n    width: 100%;\n    background-color: var(--ta-color-background-secondary);\n    border-radius: var(--ta-border-radius-l);\n    overflow: hidden;\n    cursor: pointer;\n    border: none;\n    outline: none;\n    padding: 0;\n}\n\n.imageWrapper {\n    position: relative;\n    aspect-ratio: 1 / 1;\n    background-color: var(--ta-color-background-secondary);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n}\n\n.image {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n}\n\n.placeholderIcon {\n    width: 32px;\n    height: 32px;\n    color: var(--ta-color-text-secondary);\n}\n\n.info {\n    padding: 8px;\n    text-align: left;\n}\n\n.name {\n    composes: bodySmall from \"../../../../styles/typography.module.css\";\n\n    color: var(--ta-color-text);\n    font-weight: var(--ta-body-medium-font-weight);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin: 0;\n}\n\n.collectionName {\n    composes: bodySmall from \"../../../../styles/typography.module.css\";\n\n    color: var(--ta-color-text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin: 0;\n}\n\n.saleBadge {\n    composes: caption2 from \"../../../../styles/typography.module.css\";\n\n    position: absolute;\n    top: 8px;\n    left: 8px;\n    display: inline-flex;\n    align-items: center;\n    padding: 2px 6px;\n    border-radius: var(--ta-border-radius-s);\n    font-weight: var(--ta-body-medium-font-weight);\n    background-color: var(--ta-color-primary);\n    color: var(--ta-color-text-on-primary, #fff);\n}\n"],"mappings":"AAAA,CAAC;AACG,cAAY;AACZ,SAAO;AACP,oBAAkB,IAAI;AACtB,iBAAe,IAAI;AACnB,YAAU;AACV,UAAQ;AACR,UAAQ;AACR,WAAS;AACT,WAAS;AACb;AAEA,CAAC;AACG,YAAU;AACV,gBAAc,EAAE,EAAE;AAClB,oBAAkB,IAAI;AACtB,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,YAAU;AACd;AAEA,CAAC;AACG,SAAO;AACP,UAAQ;AACR,cAAY;AAChB;AAEA,CAAC;AACG,SAAO;AACP,UAAQ;AACR,SAAO,IAAI;AACf;AAEA,CAAC;AACG,WAAS;AACT,cAAY;AAChB;AAEA,CAAC;AACG,YAAU,UAAU,KAAK;AAEzB,SAAO,IAAI;AACX,eAAa,IAAI;AACjB,eAAa;AACb,YAAU;AACV,iBAAe;AACf,UAAQ;AACZ;AAEA,CAAC;AACG,YAAU,UAAU,KAAK;AAEzB,SAAO,IAAI;AACX,eAAa;AACb,YAAU;AACV,iBAAe;AACf,UAAQ;AACZ;AAEA,CAAC;AACG,YAAU,SAAS,KAAK;AAExB,YAAU;AACV,OAAK;AACL,QAAM;AACN,WAAS;AACT,eAAa;AACb,WAAS,IAAI;AACb,iBAAe,IAAI;AACnB,eAAa,IAAI;AACjB,oBAAkB,IAAI;AACtB,SAAO,IAAI,0BAA0B,EAAE;AAC3C;","names":[]}

package/dist/features/nft/components/nft-item/nft-item.stories.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+declare const NftItemPreview: ({ name, collectionName, image, isOnSale, onClick, className, }: {
+    name: string;
+    collectionName: string;
+    image?: string;
+    isOnSale?: boolean;
+    onClick?: () => void;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof NftItemPreview>;
+export default meta;
+type Story = StoryObj<typeof NftItemPreview>;
+export declare const WithImage: Story;
+export declare const WithoutImage: Story;
+export declare const OnSale: Story;
+export declare const LongName: Story;
+export declare const NftGrid: Story;
+//# sourceMappingURL=nft-item.stories.d.ts.map

package/dist/features/nft/components/nft-item/nft-item.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nft-item.stories.d.ts","sourceRoot":"","sources":["../../../../../src/features/nft/components/nft-item/nft-item.stories.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAiBvD,QAAA,MAAM,cAAc,GAAI,gEAOrB;IACC,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,4CAaA,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAUrC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAOpB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAyBrB,CAAC"}

package/dist/features/nft/components/nft-item/nft-item.stories.js

@@ -0,0 +1,124 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var test = require('@storybook/test');
+var clsx = require('clsx');
+var styles = require('./nft-item.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const PlaceholderIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: styles__default.default.placeholderIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+  }
+) });
+const NftItemPreview = ({
+  name,
+  collectionName,
+  image,
+  isOnSale = false,
+  onClick,
+  className
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick, className: clsx__default.default(styles__default.default.nftItem, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.imageWrapper, children: [
+      image ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: image, alt: name, className: styles__default.default.image }) : /* @__PURE__ */ jsxRuntime.jsx(PlaceholderIcon, {}),
+      isOnSale && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.saleBadge, children: "On Sale" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.info, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h4", { className: styles__default.default.name, children: name }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles__default.default.collectionName, children: collectionName })
+    ] })
+  ] });
+};
+const meta = {
+  title: "Public/Features/NFT/NftItem",
+  component: NftItemPreview,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered"
+  },
+  args: {
+    onClick: test.fn()
+  }
+};
+var nft_item_stories_default = meta;
+const WithImage = {
+  args: {
+    name: "TON Diamond #1234",
+    collectionName: "TON Diamonds",
+    image: "https://picsum.photos/200"
+  }
+};
+const WithoutImage = {
+  args: {
+    name: "Mystery NFT",
+    collectionName: "Unknown Collection"
+  }
+};
+const OnSale = {
+  args: {
+    name: "Rare NFT #001",
+    collectionName: "Rare Collection",
+    image: "https://picsum.photos/201",
+    isOnSale: true
+  }
+};
+const LongName = {
+  args: {
+    name: "Very Long NFT Name That Might Overflow The Container",
+    collectionName: "Long Collection Name Here",
+    image: "https://picsum.photos/202"
+  }
+};
+const NftGrid = {
+  render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NftItemPreview,
+      {
+        name: "TON Diamond #1",
+        collectionName: "TON Diamonds",
+        image: "https://picsum.photos/200",
+        onClick: test.fn()
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NftItemPreview,
+      {
+        name: "TON Diamond #2",
+        collectionName: "TON Diamonds",
+        image: "https://picsum.photos/201",
+        isOnSale: true,
+        onClick: test.fn()
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(NftItemPreview, { name: "Mystery NFT", collectionName: "Unknown", onClick: test.fn() }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NftItemPreview,
+      {
+        name: "Rare Item #123",
+        collectionName: "Rare Items",
+        image: "https://picsum.photos/203",
+        onClick: test.fn()
+      }
+    )
+  ] })
+};
+
+exports.LongName = LongName;
+exports.NftGrid = NftGrid;
+exports.OnSale = OnSale;
+exports.WithImage = WithImage;
+exports.WithoutImage = WithoutImage;
+exports.default = nft_item_stories_default;
+//# sourceMappingURL=nft-item.stories.js.map
+//# sourceMappingURL=nft-item.stories.js.map

package/dist/features/nft/components/nft-item/nft-item.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/features/nft/components/nft-item/nft-item.stories.tsx"],"names":["jsx","styles","jsxs","clsx","fn"],"mappings":"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","file":"nft-item.stories.js","sourcesContent":["/**\n * Copyright (c) TonTech.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { Meta, StoryObj } from '@storybook/react';\nimport { fn } from '@storybook/test';\nimport clsx from 'clsx';\n\nimport styles from './nft-item.module.css';\n\nconst PlaceholderIcon = () => (\n    <svg className={styles.placeholderIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\n        />\n    </svg>\n);\n\nconst NftItemPreview = ({\n    name,\n    collectionName,\n    image,\n    isOnSale = false,\n    onClick,\n    className,\n}: {\n    name: string;\n    collectionName: string;\n    image?: string;\n    isOnSale?: boolean;\n    onClick?: () => void;\n    className?: string;\n}) => {\n    return (\n        <button onClick={onClick} className={clsx(styles.nftItem, className)}>\n            <div className={styles.imageWrapper}>\n                {image ? <img src={image} alt={name} className={styles.image} /> : <PlaceholderIcon />}\n                {isOnSale && <span className={styles.saleBadge}>On Sale</span>}\n            </div>\n            <div className={styles.info}>\n                <h4 className={styles.name}>{name}</h4>\n                <p className={styles.collectionName}>{collectionName}</p>\n            </div>\n        </button>\n    );\n};\n\nconst meta: Meta<typeof NftItemPreview> = {\n    title: 'Public/Features/NFT/NftItem',\n    component: NftItemPreview,\n    tags: ['autodocs'],\n    parameters: {\n        layout: 'centered',\n    },\n    args: {\n        onClick: fn(),\n    },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof NftItemPreview>;\n\nexport const WithImage: Story = {\n    args: {\n        name: 'TON Diamond #1234',\n        collectionName: 'TON Diamonds',\n        image: 'https://picsum.photos/200',\n    },\n};\n\nexport const WithoutImage: Story = {\n    args: {\n        name: 'Mystery NFT',\n        collectionName: 'Unknown Collection',\n    },\n};\n\nexport const OnSale: Story = {\n    args: {\n        name: 'Rare NFT #001',\n        collectionName: 'Rare Collection',\n        image: 'https://picsum.photos/201',\n        isOnSale: true,\n    },\n};\n\nexport const LongName: Story = {\n    args: {\n        name: 'Very Long NFT Name That Might Overflow The Container',\n        collectionName: 'Long Collection Name Here',\n        image: 'https://picsum.photos/202',\n    },\n};\n\nexport const NftGrid: Story = {\n    render: () => (\n        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px' }}>\n            <NftItemPreview\n                name=\"TON Diamond #1\"\n                collectionName=\"TON Diamonds\"\n                image=\"https://picsum.photos/200\"\n                onClick={fn()}\n            />\n            <NftItemPreview\n                name=\"TON Diamond #2\"\n                collectionName=\"TON Diamonds\"\n                image=\"https://picsum.photos/201\"\n                isOnSale\n                onClick={fn()}\n            />\n            <NftItemPreview name=\"Mystery NFT\" collectionName=\"Unknown\" onClick={fn()} />\n            <NftItemPreview\n                name=\"Rare Item #123\"\n                collectionName=\"Rare Items\"\n                image=\"https://picsum.photos/203\"\n                onClick={fn()}\n            />\n        </div>\n    ),\n};\n"]}

package/dist/features/nft/components/nft-item/nft-item.stories.mjs

@@ -0,0 +1,110 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { fn } from '@storybook/test';
+import clsx from 'clsx';
+import styles from './nft-item.module.css';
+
+const PlaceholderIcon = () => /* @__PURE__ */ jsx("svg", { className: styles.placeholderIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+  }
+) });
+const NftItemPreview = ({
+  name,
+  collectionName,
+  image,
+  isOnSale = false,
+  onClick,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs("button", { onClick, className: clsx(styles.nftItem, className), children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.imageWrapper, children: [
+      image ? /* @__PURE__ */ jsx("img", { src: image, alt: name, className: styles.image }) : /* @__PURE__ */ jsx(PlaceholderIcon, {}),
+      isOnSale && /* @__PURE__ */ jsx("span", { className: styles.saleBadge, children: "On Sale" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: styles.info, children: [
+      /* @__PURE__ */ jsx("h4", { className: styles.name, children: name }),
+      /* @__PURE__ */ jsx("p", { className: styles.collectionName, children: collectionName })
+    ] })
+  ] });
+};
+const meta = {
+  title: "Public/Features/NFT/NftItem",
+  component: NftItemPreview,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered"
+  },
+  args: {
+    onClick: fn()
+  }
+};
+var nft_item_stories_default = meta;
+const WithImage = {
+  args: {
+    name: "TON Diamond #1234",
+    collectionName: "TON Diamonds",
+    image: "https://picsum.photos/200"
+  }
+};
+const WithoutImage = {
+  args: {
+    name: "Mystery NFT",
+    collectionName: "Unknown Collection"
+  }
+};
+const OnSale = {
+  args: {
+    name: "Rare NFT #001",
+    collectionName: "Rare Collection",
+    image: "https://picsum.photos/201",
+    isOnSale: true
+  }
+};
+const LongName = {
+  args: {
+    name: "Very Long NFT Name That Might Overflow The Container",
+    collectionName: "Long Collection Name Here",
+    image: "https://picsum.photos/202"
+  }
+};
+const NftGrid = {
+  render: () => /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "16px" }, children: [
+    /* @__PURE__ */ jsx(
+      NftItemPreview,
+      {
+        name: "TON Diamond #1",
+        collectionName: "TON Diamonds",
+        image: "https://picsum.photos/200",
+        onClick: fn()
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NftItemPreview,
+      {
+        name: "TON Diamond #2",
+        collectionName: "TON Diamonds",
+        image: "https://picsum.photos/201",
+        isOnSale: true,
+        onClick: fn()
+      }
+    ),
+    /* @__PURE__ */ jsx(NftItemPreview, { name: "Mystery NFT", collectionName: "Unknown", onClick: fn() }),
+    /* @__PURE__ */ jsx(
+      NftItemPreview,
+      {
+        name: "Rare Item #123",
+        collectionName: "Rare Items",
+        image: "https://picsum.photos/203",
+        onClick: fn()
+      }
+    )
+  ] })
+};
+
+export { LongName, NftGrid, OnSale, WithImage, WithoutImage, nft_item_stories_default as default };
+//# sourceMappingURL=nft-item.stories.mjs.map
+//# sourceMappingURL=nft-item.stories.mjs.map

package/dist/features/nft/components/nft-item/nft-item.stories.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/features/nft/components/nft-item/nft-item.stories.tsx"],"names":[],"mappings":"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","file":"nft-item.stories.mjs","sourcesContent":["/**\n * Copyright (c) TonTech.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { Meta, StoryObj } from '@storybook/react';\nimport { fn } from '@storybook/test';\nimport clsx from 'clsx';\n\nimport styles from './nft-item.module.css';\n\nconst PlaceholderIcon = () => (\n    <svg className={styles.placeholderIcon} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\n        />\n    </svg>\n);\n\nconst NftItemPreview = ({\n    name,\n    collectionName,\n    image,\n    isOnSale = false,\n    onClick,\n    className,\n}: {\n    name: string;\n    collectionName: string;\n    image?: string;\n    isOnSale?: boolean;\n    onClick?: () => void;\n    className?: string;\n}) => {\n    return (\n        <button onClick={onClick} className={clsx(styles.nftItem, className)}>\n            <div className={styles.imageWrapper}>\n                {image ? <img src={image} alt={name} className={styles.image} /> : <PlaceholderIcon />}\n                {isOnSale && <span className={styles.saleBadge}>On Sale</span>}\n            </div>\n            <div className={styles.info}>\n                <h4 className={styles.name}>{name}</h4>\n                <p className={styles.collectionName}>{collectionName}</p>\n            </div>\n        </button>\n    );\n};\n\nconst meta: Meta<typeof NftItemPreview> = {\n    title: 'Public/Features/NFT/NftItem',\n    component: NftItemPreview,\n    tags: ['autodocs'],\n    parameters: {\n        layout: 'centered',\n    },\n    args: {\n        onClick: fn(),\n    },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof NftItemPreview>;\n\nexport const WithImage: Story = {\n    args: {\n        name: 'TON Diamond #1234',\n        collectionName: 'TON Diamonds',\n        image: 'https://picsum.photos/200',\n    },\n};\n\nexport const WithoutImage: Story = {\n    args: {\n        name: 'Mystery NFT',\n        collectionName: 'Unknown Collection',\n    },\n};\n\nexport const OnSale: Story = {\n    args: {\n        name: 'Rare NFT #001',\n        collectionName: 'Rare Collection',\n        image: 'https://picsum.photos/201',\n        isOnSale: true,\n    },\n};\n\nexport const LongName: Story = {\n    args: {\n        name: 'Very Long NFT Name That Might Overflow The Container',\n        collectionName: 'Long Collection Name Here',\n        image: 'https://picsum.photos/202',\n    },\n};\n\nexport const NftGrid: Story = {\n    render: () => (\n        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px' }}>\n            <NftItemPreview\n                name=\"TON Diamond #1\"\n                collectionName=\"TON Diamonds\"\n                image=\"https://picsum.photos/200\"\n                onClick={fn()}\n            />\n            <NftItemPreview\n                name=\"TON Diamond #2\"\n                collectionName=\"TON Diamonds\"\n                image=\"https://picsum.photos/201\"\n                isOnSale\n                onClick={fn()}\n            />\n            <NftItemPreview name=\"Mystery NFT\" collectionName=\"Unknown\" onClick={fn()} />\n            <NftItemPreview\n                name=\"Rare Item #123\"\n                collectionName=\"Rare Items\"\n                image=\"https://picsum.photos/203\"\n                onClick={fn()}\n            />\n        </div>\n    ),\n};\n"]}

package/dist/features/nft/hooks/use-nft.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { GetNftData, GetNftErrorType, GetNftQueryConfig } from '@ton/appkit/queries';
+import type { UseQueryReturnType } from '../../../libs/query';
+export type UseNftParameters<selectData = GetNftData> = GetNftQueryConfig<selectData>;
+export type UseNftReturnType<selectData = GetNftData> = UseQueryReturnType<selectData, GetNftErrorType>;
+/**
+ * Hook to get a single NFT
+ */
+export declare const useNft: <selectData = GetNftData>(parameters?: UseNftParameters<selectData>) => UseNftReturnType<selectData>;
+//# sourceMappingURL=use-nft.d.ts.map

package/dist/features/nft/hooks/use-nft.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-nft.d.ts","sourceRoot":"","sources":["../../../../src/features/nft/hooks/use-nft.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAI1F,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAE9D,MAAM,MAAM,gBAAgB,CAAC,UAAU,GAAG,UAAU,IAAI,iBAAiB,CAAC,UAAU,CAAC,CAAC;AAEtF,MAAM,MAAM,gBAAgB,CAAC,UAAU,GAAG,UAAU,IAAI,kBAAkB,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC;AAExG;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,UAAU,GAAG,UAAU,EAC1C,aAAY,gBAAgB,CAAC,UAAU,CAAM,KAC9C,gBAAgB,CAAC,UAAU,CAI7B,CAAC"}

package/dist/features/nft/hooks/use-nft.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var queries = require('@ton/appkit/queries');
+var useAppKit = require('../../../hooks/use-app-kit');
+var query = require('../../../libs/query');
+
+const useNft = (parameters = {}) => {
+  const appKit = useAppKit.useAppKit();
+  return query.useQuery(queries.getNftQueryOptions(appKit, parameters));
+};
+
+exports.useNft = useNft;
+//# sourceMappingURL=use-nft.js.map
+//# sourceMappingURL=use-nft.js.map

package/dist/features/nft/hooks/use-nft.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/features/nft/hooks/use-nft.ts"],"names":["useAppKit","useQuery","getNftQueryOptions"],"mappings":";;;;;;AAsBO,MAAM,MAAA,GAAS,CAClB,UAAA,GAA2C,EAAC,KACb;AAC/B,EAAA,MAAM,SAASA,mBAAA,EAAU;AAEzB,EAAA,OAAOC,cAAA,CAASC,0BAAA,CAAmB,MAAA,EAAQ,UAAU,CAAC,CAAA;AAC1D","file":"use-nft.js","sourcesContent":["/**\n * Copyright (c) TonTech.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { getNftQueryOptions } from '@ton/appkit/queries';\nimport type { GetNftData, GetNftErrorType, GetNftQueryConfig } from '@ton/appkit/queries';\n\nimport { useAppKit } from '../../../hooks/use-app-kit';\nimport { useQuery } from '../../../libs/query';\nimport type { UseQueryReturnType } from '../../../libs/query';\n\nexport type UseNftParameters<selectData = GetNftData> = GetNftQueryConfig<selectData>;\n\nexport type UseNftReturnType<selectData = GetNftData> = UseQueryReturnType<selectData, GetNftErrorType>;\n\n/**\n * Hook to get a single NFT\n */\nexport const useNft = <selectData = GetNftData>(\n    parameters: UseNftParameters<selectData> = {},\n): UseNftReturnType<selectData> => {\n    const appKit = useAppKit();\n\n    return useQuery(getNftQueryOptions(appKit, parameters));\n};\n"]}

package/dist/features/nft/hooks/use-nft.mjs

@@ -0,0 +1,12 @@
+import { getNftQueryOptions } from '@ton/appkit/queries';
+import { useAppKit } from '../../../hooks/use-app-kit';
+import { useQuery } from '../../../libs/query';
+
+const useNft = (parameters = {}) => {
+  const appKit = useAppKit();
+  return useQuery(getNftQueryOptions(appKit, parameters));
+};
+
+export { useNft };
+//# sourceMappingURL=use-nft.mjs.map
+//# sourceMappingURL=use-nft.mjs.map

package/dist/features/nft/hooks/use-nft.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/features/nft/hooks/use-nft.ts"],"names":[],"mappings":";;;;AAsBO,MAAM,MAAA,GAAS,CAClB,UAAA,GAA2C,EAAC,KACb;AAC/B,EAAA,MAAM,SAAS,SAAA,EAAU;AAEzB,EAAA,OAAO,QAAA,CAAS,kBAAA,CAAmB,MAAA,EAAQ,UAAU,CAAC,CAAA;AAC1D","file":"use-nft.mjs","sourcesContent":["/**\n * Copyright (c) TonTech.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { getNftQueryOptions } from '@ton/appkit/queries';\nimport type { GetNftData, GetNftErrorType, GetNftQueryConfig } from '@ton/appkit/queries';\n\nimport { useAppKit } from '../../../hooks/use-app-kit';\nimport { useQuery } from '../../../libs/query';\nimport type { UseQueryReturnType } from '../../../libs/query';\n\nexport type UseNftParameters<selectData = GetNftData> = GetNftQueryConfig<selectData>;\n\nexport type UseNftReturnType<selectData = GetNftData> = UseQueryReturnType<selectData, GetNftErrorType>;\n\n/**\n * Hook to get a single NFT\n */\nexport const useNft = <selectData = GetNftData>(\n    parameters: UseNftParameters<selectData> = {},\n): UseNftReturnType<selectData> => {\n    const appKit = useAppKit();\n\n    return useQuery(getNftQueryOptions(appKit, parameters));\n};\n"]}

package/dist/features/nft/hooks/use-nfts-by-address.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) TonTech.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { GetNFTsData, GetNFTsErrorType, GetNFTsQueryConfig } from '@ton/appkit/queries';
+import type { UseQueryReturnType } from '../../../libs/query';
+export type UseNFTsByAddressParameters<selectData = GetNFTsData> = GetNFTsQueryConfig<selectData>;
+export type UseNFTsByAddressReturnType<selectData = GetNFTsData> = UseQueryReturnType<selectData, GetNFTsErrorType>;
+/**
+ * Hook to get NFTs
+ */
+export declare const useNFTsByAddress: <selectData = GetNFTsData>(parameters?: UseNFTsByAddressParameters<selectData>) => UseNFTsByAddressReturnType<selectData>;
+//# sourceMappingURL=use-nfts-by-address.d.ts.map

package/dist/features/nft/hooks/use-nfts-by-address.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-nfts-by-address.d.ts","sourceRoot":"","sources":["../../../../src/features/nft/hooks/use-nfts-by-address.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAI7F,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAE9D,MAAM,MAAM,0BAA0B,CAAC,UAAU,GAAG,WAAW,IAAI,kBAAkB,CAAC,UAAU,CAAC,CAAC;AAElG,MAAM,MAAM,0BAA0B,CAAC,UAAU,GAAG,WAAW,IAAI,kBAAkB,CAAC,UAAU,EAAE,gBAAgB,CAAC,CAAC;AAEpH;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,UAAU,GAAG,WAAW,EACrD,aAAY,0BAA0B,CAAC,UAAU,CAAM,KACxD,0BAA0B,CAAC,UAAU,CAIvC,CAAC"}

package/dist/features/nft/hooks/use-nfts-by-address.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var queries = require('@ton/appkit/queries');
+var useAppKit = require('../../../hooks/use-app-kit');
+var query = require('../../../libs/query');
+
+const useNFTsByAddress = (parameters = {}) => {
+  const appKit = useAppKit.useAppKit();
+  return query.useQuery(queries.getNFTsQueryOptions(appKit, parameters));
+};
+
+exports.useNFTsByAddress = useNFTsByAddress;
+//# sourceMappingURL=use-nfts-by-address.js.map
+//# sourceMappingURL=use-nfts-by-address.js.map

package/dist/features/nft/hooks/use-nfts-by-address.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/features/nft/hooks/use-nfts-by-address.ts"],"names":["useAppKit","useQuery","getNFTsQueryOptions"],"mappings":";;;;;;AAsBO,MAAM,gBAAA,GAAmB,CAC5B,UAAA,GAAqD,EAAC,KACb;AACzC,EAAA,MAAM,SAASA,mBAAA,EAAU;AAEzB,EAAA,OAAOC,cAAA,CAASC,2BAAA,CAAoB,MAAA,EAAQ,UAAU,CAAC,CAAA;AAC3D","file":"use-nfts-by-address.js","sourcesContent":["/**\n * Copyright (c) TonTech.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { getNFTsQueryOptions } from '@ton/appkit/queries';\nimport type { GetNFTsData, GetNFTsErrorType, GetNFTsQueryConfig } from '@ton/appkit/queries';\n\nimport { useAppKit } from '../../../hooks/use-app-kit';\nimport { useQuery } from '../../../libs/query';\nimport type { UseQueryReturnType } from '../../../libs/query';\n\nexport type UseNFTsByAddressParameters<selectData = GetNFTsData> = GetNFTsQueryConfig<selectData>;\n\nexport type UseNFTsByAddressReturnType<selectData = GetNFTsData> = UseQueryReturnType<selectData, GetNFTsErrorType>;\n\n/**\n * Hook to get NFTs\n */\nexport const useNFTsByAddress = <selectData = GetNFTsData>(\n    parameters: UseNFTsByAddressParameters<selectData> = {},\n): UseNFTsByAddressReturnType<selectData> => {\n    const appKit = useAppKit();\n\n    return useQuery(getNFTsQueryOptions(appKit, parameters));\n};\n"]}