@zoralabs/nft-hooks - npm Package Compare versions

Comparing version 0.1.7 to 0.1.8

dist/fetcher/MediaFetchAgent.d.ts

 import type { NetworkIDs } from '../constants/networks';
-import { NFTDataType, MediaContentType, MetadataResultType, UsernameResponseType } from './FetchResultTypes';
+import { NFTDataType, MediaContentType, NFTMediaDataType, UsernameResponseType } from './FetchResultTypes';
 import { CurrencyLookupType } from './AuctionInfoTypes';
@@ -26,8 +26,2 @@ /**
     /**
-     * Cached, non-batched function to retrieve NFT media information from a JSON blob at the given url
-     * @param url URL fo Metadata to fetch
-     * @returns Metadata Information
-     */
-    loadMetadata(url: string): Promise<MetadataResultType>;
-    /**
      * Fetch NFT content or retun URI if content shouild not be fetched
@@ -54,2 +48,3 @@ * @param url NFT Content URL
     loadNFTData(mediaId: string, currencyInfos?: CurrencyLookupType): Promise<NFTDataType>;
+    loadNFTDataUntransformed(mediaId: string): Promise<NFTMediaDataType>;
     /**
@@ -132,6 +127,6 @@ *
     /**
-     * Internal fetch method to query metadata from IPFS
+     * Fetch method to query metadata from IPFS. Not cached
      *
      * @function fetchIPFSMetadataCached
-     * @private
+     * @public
      * @param url Metadata Source
@@ -141,3 +136,3 @@ * @returns IPFS Metadata Fetch
      */
-    private fetchIPFSMetadataCached;
+    fetchIPFSMetadata(url: string): Promise<any>;
 }

dist/fetcher/MediaFetchAgent.js

@@ -28,11 +28,2 @@ "use strict";
             usernameLoader: new dataloader_1.default((keys) => this.fetchZoraUsernames(keys)),
-            // Only caches and does not batch metadata information
-            // TODO(iain): Replace with SWR
-            metadataLoader: new dataloader_1.default(async (keys) => {
-                if (keys.length !== 1) {
-                    throw new Error('Wrong keys!');
-                }
-                const key = keys[0];
-                return [await this.fetchIPFSMetadataCached(key)];
-            }, { maxBatchSize: 1 }),
         };
@@ -61,11 +52,2 @@ }
     /**
-     * Cached, non-batched function to retrieve NFT media information from a JSON blob at the given url
-     * @param url URL fo Metadata to fetch
-     * @returns Metadata Information
-     */
-    async loadMetadata(url) {
-        const metadata = await this.loaders.metadataLoader.load(url);
-        return { metadata };
-    }
-    /**
      * Fetch NFT content or retun URI if content shouild not be fetched
@@ -122,2 +104,5 @@ * @param url NFT Content URL
     }
+    async loadNFTDataUntransformed(mediaId) {
+        return await this.loaders.mediaLoader.load(mediaId);
+    }
     /**
@@ -186,2 +171,6 @@ *
             method: 'POST',
+            type: 'cors',
+            headers: {
+                'content-type': 'application/json',
+            },
             body: JSON.stringify({ addresses }),
@@ -191,3 +180,3 @@ });
         return addresses.map((address) => {
-            const foundUsername = usernames.find((username) => username.address === address);
+            const foundUsername = usernames.find((username) => username.address.toLowerCase() === address);
             if (foundUsername) {
@@ -218,6 +207,6 @@ return foundUsername;
     /**
-     * Internal fetch method to query metadata from IPFS
+     * Fetch method to query metadata from IPFS. Not cached
      *
      * @function fetchIPFSMetadataCached
-     * @private
+     * @public
      * @param url Metadata Source
@@ -227,3 +216,3 @@ * @returns IPFS Metadata Fetch
      */
-    async fetchIPFSMetadataCached(url) {
+    async fetchIPFSMetadata(url) {
         // TODO(iain): Properly parse metadata from `ourzora/media-metadata-schemas
@@ -230,0 +219,0 @@ const request = await new FetchWithTimeout_1.FetchWithTimeout(this.timeouts.IPFS, 'application/json').fetch(url);

dist/fetcher/TransformFetchResults.js

@@ -91,3 +91,3 @@ "use strict";
         const inETH = new big_js_1.default(currencyInfo.token.derivedETH)
-            .mul(new big_js_1.default(bidAmount).div(new big_js_1.default(10).pow(currencyInfo.token.decimals)))
+            .mul(new big_js_1.default(bidAmount).div(new big_js_1.default(10).pow(parseInt(currencyInfo.token.decimals, 10))))
             .toString();
@@ -154,2 +154,3 @@ return {
             }
+            return;
         }
@@ -265,3 +266,4 @@ const reserve = chainNFT.pricing.reserve;
                 reserveMet: hasActiveReserveAuction
-                    ? !!((_e = chainNFT.pricing.reserve) === null || _e === void 0 ? void 0 : _e.firstBidTime) && ((_f = chainNFT.pricing.reserve) === null || _f === void 0 ? void 0 : _f.firstBidTime) !== "0"
+                    ? !!((_e = chainNFT.pricing.reserve) === null || _e === void 0 ? void 0 : _e.firstBidTime) &&
+                        ((_f = chainNFT.pricing.reserve) === null || _f === void 0 ? void 0 : _f.firstBidTime) !== '0'
                     : false,
@@ -268,0 +270,0 @@ endingAt: hasActiveReserveAuction

dist/hooks/useNFT.d.ts

 import { NFTDataType } from '../fetcher/FetchResultTypes';
 export declare type useNFTType = {
-    loading: boolean;
     currencyLoaded: boolean;
@@ -8,2 +7,7 @@ error?: string;
 };
+declare type OptionsType = {
+    refreshInterval?: number;
+    initialData?: any;
+    loadCurrencyInfo?: boolean;
+};
 /**
@@ -13,6 +17,6 @@ * Fetches on-chain NFT data and pricing for the given zNFT id
  * @param id id of zNFT to fetch blockchain information for
- * @param loadCurrencyInfo flag to enable loading currency conversion info to convert
- *                         token value to ETH and USD equivalent
+ * @param options SWR flags and an option to load currency info
  * @returns useNFTType hook results include loading, error, and chainNFT data.
  */
-export declare function useNFT(id?: string, loadCurrencyInfo?: boolean): useNFTType;
+export declare function useNFT(id?: string, options?: OptionsType): useNFTType;
+export {};

dist/hooks/useNFT.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useNFT = void 0;
+const tslib_1 = require("tslib");
 const react_1 = require("react");
+const swr_1 = tslib_1.__importDefault(require("swr"));
+const NFTFetchContext_1 = require("../context/NFTFetchContext");
+const TransformFetchResults_1 = require("../fetcher/TransformFetchResults");
 const ExtractResultData_1 = require("../fetcher/ExtractResultData");
-const useCallbackFetch_1 = require("./useCallbackFetch");
 /**
@@ -11,29 +14,22 @@ * Fetches on-chain NFT data and pricing for the given zNFT id
  * @param id id of zNFT to fetch blockchain information for
- * @param loadCurrencyInfo flag to enable loading currency conversion info to convert
- *                         token value to ETH and USD equivalent
+ * @param options SWR flags and an option to load currency info
  * @returns useNFTType hook results include loading, error, and chainNFT data.
  */
-function useNFT(id, loadCurrencyInfo = false) {
-    const [data, setData] = react_1.useState();
-    const [currencyLoaded, setCurrencyLoaded] = react_1.useState(false);
-    const [error, setError] = react_1.useState();
-    useCallbackFetch_1.useCallbackFetch(id, async (fetchAgent, id) => {
-        try {
-            let data = await fetchAgent.loadNFTData(id);
-            setData(data);
-            if (loadCurrencyInfo && data) {
-                setCurrencyLoaded(true);
-                const currencyInfos = await fetchAgent.loadCurrencies(ExtractResultData_1.getCurrenciesInUse(data));
-                setData(await fetchAgent.loadNFTData(id, currencyInfos));
-                setCurrencyLoaded(true);
-            }
-        }
-        catch (err) {
-            setError(err.toString());
-        }
+function useNFT(id, options = {}) {
+    const fetcher = react_1.useContext(NFTFetchContext_1.NFTFetchContext);
+    const { loadCurrencyInfo = false, refreshInterval, initialData } = options || {};
+    const nftData = swr_1.default(id ? ['loadNFTDataUntransformed', id] : null, (_, id) => fetcher.loadNFTDataUntransformed(id), { refreshInterval, dedupingInterval: 0, initialData });
+    const currencyData = swr_1.default(nftData.data && loadCurrencyInfo
+        ? ['loadCurrencies', ...ExtractResultData_1.getCurrenciesInUse(TransformFetchResults_1.addAuctionInformation(nftData.data))]
+        : null, (_, ...currencies) => fetcher.loadCurrencies(currencies), {
+        refreshInterval,
+        dedupingInterval: 0,
     });
+    let data;
+    if (nftData.data !== undefined) {
+        data = TransformFetchResults_1.addAuctionInformation(nftData.data, currencyData.data);
+    }
     return {
-        loading: !error && !data,
-        currencyLoaded,
-        error,
+        currencyLoaded: !!currencyData.data,
+        error: nftData.error,
         data,
@@ -40,0 +36,0 @@ };

dist/hooks/useNFTContent.d.ts

@@ -0,4 +1,4 @@
+import { SWRConfiguration } from 'swr';
 import { MediaContentType } from '../fetcher/FetchResultTypes';
 export declare type useNFTContentType = {
-    loading: boolean;
     error?: string;
@@ -16,2 +16,2 @@ content?: MediaContentType;
  */
-export declare function useNFTContent(uri?: string, mimeType?: string): useNFTContentType;
+export declare function useNFTContent(uri?: string, mimeType?: string, options?: SWRConfiguration<MediaContentType>): useNFTContentType;

dist/hooks/useNFTContent.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useNFTContent = void 0;
+const tslib_1 = require("tslib");
 const react_1 = require("react");
-const useCallbackFetch_1 = require("./useCallbackFetch");
+const swr_1 = tslib_1.__importDefault(require("swr"));
+const NFTFetchContext_1 = require("../context/NFTFetchContext");
 /**
@@ -15,25 +17,13 @@ * Hook to fetch NFT content from uri and mimetype
  */
-function useNFTContent(uri, mimeType) {
-    const [content, setContent] = react_1.useState();
-    const [error, setError] = react_1.useState();
-    useCallbackFetch_1.useCallbackFetch([uri, mimeType], async (fetchAgent, [uri, mimeType]) => {
-        if (!uri) {
-            return;
-        }
-        try {
-            if (!mimeType) {
-                mimeType = await fetchAgent.fetchContentMimeType(uri);
-            }
-            setContent(await fetchAgent.fetchContent(uri, mimeType));
-        }
-        catch (err) {
-            setError(err.toString());
-        }
-    });
+function useNFTContent(uri, mimeType, options) {
+    const fetcher = react_1.useContext(NFTFetchContext_1.NFTFetchContext);
+    const mimeTypeFetched = swr_1.default(uri && !mimeType ? ['fetchContentMimeType', uri] : null, (_, uri) => fetcher.fetchContentMimeType(uri));
+    const mimeTypeResult = mimeType || mimeTypeFetched.data;
+    const content = swr_1.default(uri && mimeTypeResult ? ['fetchContent', uri, mimeTypeResult] : null, (_, uri, mimeTypeResult) => fetcher.fetchContent(uri, mimeTypeResult), options);
+    const error = mimeTypeFetched.error || content.error;
     return {
-        loading: !error && !content && !!uri,
         error,
-        content,
+        content: content.data,
     };
 }
 exports.useNFTContent = useNFTContent;

dist/hooks/useNFTMetadata.d.ts

 export declare type useNFTMetadataType = {
     loading: boolean;
-    error: string | undefined;
+    error?: Error;
     metadata: any;
@@ -14,2 +14,2 @@ };
  */
-export declare function useNFTMetadata(uri?: string): useNFTMetadataType;
+export declare function useNFTMetadata(uri?: string, initialData?: any): useNFTMetadataType;

dist/hooks/useNFTMetadata.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useNFTMetadata = void 0;
+const tslib_1 = require("tslib");
 const react_1 = require("react");
-const useCallbackFetch_1 = require("./useCallbackFetch");
+const swr_1 = tslib_1.__importDefault(require("swr"));
+const NFTFetchContext_1 = require("../context/NFTFetchContext");
 /**
@@ -14,20 +16,11 @@ * Fetches NFT Metadata from IPFS.
  */
-function useNFTMetadata(uri) {
-    const [metadata, setMetadata] = react_1.useState();
-    const [error, setError] = react_1.useState();
-    useCallbackFetch_1.useCallbackFetch(uri, async (fetchAgent, uri) => {
-        try {
-            const { metadata } = await fetchAgent.loadMetadata(uri);
-            setMetadata(metadata);
-        }
-        catch (err) {
-            setError(err.toString());
-        }
-    });
+function useNFTMetadata(uri, initialData) {
+    const fetcher = react_1.useContext(NFTFetchContext_1.NFTFetchContext);
+    const { error, data } = swr_1.default(uri ? ['loadMetadata', uri] : null, (_, uri) => fetcher.fetchIPFSMetadata(uri), { initialData });
     return {
-        loading: !error && !metadata,
+        loading: !error && !data,
         error,
-        metadata,
+        metadata: data,
     };
 }
 exports.useNFTMetadata = useNFTMetadata;

dist/hooks/useZoraUsername.d.ts

@@ -1,2 +0,1 @@
-import { UsernameResponseType } from '../fetcher/FetchResultTypes';
 /**
@@ -9,4 +8,4 @@ * useZoraUsername - Load zora username for pretty display
 export declare function useZoraUsername(address: string): {
-    error: string | undefined;
-    username: UsernameResponseType | undefined;
+    error: any;
+    username: import("../fetcher/FetchResultTypes").UsernameResponseType | undefined;
 };

dist/hooks/useZoraUsername.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useZoraUsername = void 0;
+const tslib_1 = require("tslib");
 const react_1 = require("react");
-const useCallbackFetch_1 = require("./useCallbackFetch");
+const swr_1 = tslib_1.__importDefault(require("swr"));
+const NFTFetchContext_1 = require("../context/NFTFetchContext");
 /**
@@ -13,15 +15,6 @@ * useZoraUsername - Load zora username for pretty display
 function useZoraUsername(address) {
-    const [error, setError] = react_1.useState();
-    const [username, setUsername] = react_1.useState();
-    useCallbackFetch_1.useCallbackFetch(address, async (fetch, address) => {
-        try {
-            setUsername(await fetch.loadUsername(address));
-        }
-        catch (err) {
-            setUsername({ address });
-            setError(err.toString());
-        }
-    });
-    return { error, username };
+    const fetcher = react_1.useContext(NFTFetchContext_1.NFTFetchContext);
+    const { error, data } = swr_1.default(['loadUsername', address], (_, address) => fetcher.loadUsername(address));
+    return { error, username: data };
 }
 exports.useZoraUsername = useZoraUsername;

dist/index.d.ts

 import { Networks, NetworkIDs } from './constants/networks';
-import { useNFT } from './hooks/useNFT';
-import { useNFTContent } from './hooks/useNFTContent';
-import { useNFTMetadata } from './hooks/useNFTMetadata';
+import { useNFT, useNFTType } from './hooks/useNFT';
+import { useNFTContent, useNFTContentType } from './hooks/useNFTContent';
+import { useNFTMetadata, useNFTMetadataType } from './hooks/useNFTMetadata';
 import { NFTFetchConfiguration } from './context/NFTFetchContext';
@@ -11,2 +11,3 @@ import { MediaFetchAgent } from './fetcher/MediaFetchAgent';
 import { useZoraUsername } from './hooks/useZoraUsername';
-export { useNFT, useNFTContent, useNFTMetadata, useAuctions, useZoraUsername, NFTFetchConfiguration, MediaFetchAgent, AuctionResultType, NFTDataType, ChainCurrencyType, Networks, NetworkIDs, ExtractResultData, };
+import { PricingInfo } from './fetcher/AuctionInfoTypes';
+export { useNFT, useNFTContent, useNFTMetadata, useAuctions, useZoraUsername, useNFTType, useNFTContentType, useNFTMetadataType, PricingInfo, NFTFetchConfiguration, MediaFetchAgent, AuctionResultType, NFTDataType, ChainCurrencyType, Networks, NetworkIDs, ExtractResultData, };

package.json

 {
   "name": "@zoralabs/nft-hooks",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Generic Rendering Component for zNFTs",
@@ -65,2 +65,3 @@ "repository": "https://github.com/our-zora/nft-hooks",
     "react-test-renderer": "^17.0.2",
+    "swr": "^0.5.6",
     "tslib": "^2.2.0"
@@ -67,0 +68,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

272396

decreased by-0.12%

Dependency count

10

increased by11.11%

Lines of code

6326

decreased by-0.58%

Dependency changes

• + Addedswr@^0.5.6

• + Addeddequal@2.0.2(transitive)

• + Addedswr@0.5.7(transitive)