@ledgerhq/live-common 21.36.3 → 22.0.2

package/src/nft/NftMetadataProvider/index.tsx

@@ -5,95 +5,69 @@ import React, {
   useState,
   useEffect,
 } from "react";
-import { Currency, findCryptoCurrencyById } from "@ledgerhq/cryptoassets";
-import { API, apiForCurrency } from "../../api/Ethereum";
-import { NFT, NFTMetadataResponse } from "../../types";
-import { getNftKey } from "../helpers";
+import { getNftCollectionKey, getNftKey } from "../helpers";
 import {
-  Batch,
-  BatchElement,
   NFTMetadataContextAPI,
   NFTMetadataContextState,
   NFTMetadataContextType,
   NFTResource,
 } from "./types";
 import { isOutdated } from "./logic";
-
-const currency: Currency = findCryptoCurrencyById("ethereum")!;
-const ethApi: API = apiForCurrency(currency);
+import { getCurrencyBridge } from "../../bridge";
+import { getCryptoCurrencyById } from "@ledgerhq/cryptoassets";
+import { NFT, ProtoNFT } from "../../types";
 
 const NftMetadataContext = createContext<NFTMetadataContextType>({
   cache: {},
   loadNFTMetadata: () => Promise.resolve(),
+  loadCollectionMetadata: () => Promise.resolve(),
   clearCache: () => {},
 });
 
-export const metadataCallBatcher = (() => {
-  const batch: BatchElement[] = [];
-
-  let debounce;
-  const timeoutBatchCall = () => {
-    // Clear the previous scheduled call if it was existing
-    clearTimeout(debounce);
-
-    // Schedule a new call with the whole batch
-    debounce = setTimeout(() => {
-      // Seperate each batch element properties into arrays by type and index
-      const { couples, resolvers, rejecters } = batch.reduce(
-        (acc, { couple, resolve, reject }) => {
-          acc.couples.push(couple);
-          acc.resolvers.push(resolve);
-          acc.rejecters.push(reject);
-
-          return acc;
-        },
-        { couples: [], resolvers: [], rejecters: [] } as Batch
-      );
-      // Empty the batch
-      batch.length = 0;
-
-      // Make the call with all the couples of contract and tokenId at once
-      ethApi
-        .getNFTMetadata(couples)
-        .then((res) => {
-          // Resolve each batch element with its own resolver and only its response
-          res.forEach((metadata, index) => resolvers[index](metadata));
-        })
-        .catch((err) => {
-          // Reject all batch element with the error
-          rejecters.forEach((reject) => reject(err));
-        });
-    });
-  };
-
-  return {
-    // Load the metadata for a given couple contract + tokenId
-    load({ contract, tokenId }): Promise<NFTMetadataResponse> {
-      return new Promise((resolve, reject) => {
-        batch.push({ couple: { contract, tokenId }, resolve, reject });
-        timeoutBatchCall();
-      });
-    },
-  };
-})();
-
-// DEPRECATED, use useNftResource
 export function useNftMetadata(
   contract: string | undefined,
-  tokenId: string | undefined
+  tokenId: string | undefined,
+  currencyId: string | undefined
 ): NFTResource {
   const { cache, loadNFTMetadata } = useContext(NftMetadataContext);
+  const key =
+    contract && tokenId && currencyId
+      ? getNftKey(contract, tokenId, currencyId)
+      : "";
+  const cachedData = cache[key];
 
-  const key = contract && tokenId ? getNftKey(contract, tokenId) : "";
+  useEffect(() => {
+    if (!contract || !tokenId || !currencyId) return;
+    if (!cachedData || isOutdated(cachedData)) {
+      loadNFTMetadata(contract, tokenId, currencyId);
+    }
+  }, [contract, tokenId, cachedData, loadNFTMetadata, currencyId]);
+
+  if (cachedData) {
+    return cachedData;
+  } else {
+    return {
+      status: "queued",
+    };
+  }
+}
+
+export function useNftCollectionMetadata(
+  contract: string | undefined,
+  currencyId: string | undefined
+): NFTResource {
+  const { cache, loadCollectionMetadata } = useContext(NftMetadataContext);
+  const key =
+    contract && currencyId ? getNftCollectionKey(contract, currencyId) : "";
 
   const cachedData = cache[key];
 
   useEffect(() => {
-    if (!contract || !tokenId) return;
+    if (!contract || !currencyId) return;
     if (!cachedData || isOutdated(cachedData)) {
-      loadNFTMetadata(contract, tokenId);
+      loadCollectionMetadata(contract, currencyId);
     }
-  }, [contract, tokenId, cachedData, loadNFTMetadata]);
+  }, [contract, cachedData, currencyId, loadCollectionMetadata]);
 
   if (cachedData) {
     return cachedData;
@@ -104,16 +78,44 @@ export function useNftMetadata(
   }
 }
 
-export function useNftResource(nft: NFT | undefined): NFTResource {
-  return useNftMetadata(nft?.collection.contract, nft?.tokenId);
+type UseNFTResponse =
+  | { status: Exclude<NFTResource["status"], "loaded"> }
+  | { status: "loaded"; nft: NFT };
+
+export function useNft(protoNft: ProtoNFT): UseNFTResponse {
+  const data = useNftMetadata(
+    protoNft.contract,
+    protoNft.tokenId,
+    protoNft.currencyId
+  );
+
+  const { status } = data;
+  const metadata = useMemo(
+    () => (status === "loaded" ? data.metadata : null),
+    [data, status]
+  );
+
+  const nft = useMemo(
+    () => (status === "loaded" && metadata ? { ...protoNft, metadata } : null),
+    [protoNft, metadata]
+  ) as NFT | null;
+
+  return status !== "loaded"
+    ? { status }
+    : {
+        status,
+        nft: nft!,
+      };
 }
 
 export function useNftAPI(): NFTMetadataContextAPI {
-  const { clearCache, loadNFTMetadata } = useContext(NftMetadataContext);
+  const { clearCache, loadNFTMetadata, loadCollectionMetadata } =
+    useContext(NftMetadataContext);
 
   return {
     clearCache,
     loadNFTMetadata,
+    loadCollectionMetadata,
   };
 }
 
@@ -128,10 +130,94 @@ export function NftMetadataProvider({
     cache: {},
   });
 
-  const api = useMemo(
+  const api: NFTMetadataContextAPI = useMemo(
     () => ({
-      loadNFTMetadata: async (contract: string, tokenId: string) => {
-        const key = getNftKey(contract, tokenId);
+      loadNFTMetadata: async (
+        contract: string,
+        tokenId: string,
+        currencyId: string
+      ) => {
+        const key = getNftKey(contract, tokenId, currencyId);
+        const currency = getCryptoCurrencyById(currencyId);
+        const currencyBridge = getCurrencyBridge(currency);
+
+        if (!currencyBridge.nftResolvers?.nftMetadata) {
+          throw new Error("Currency doesn't support NFT metadata");
+        }
+
+        setState((oldState) => ({
+          ...oldState,
+          cache: {
+            ...oldState.cache,
+            [key]: {
+              status: "loading",
+            },
+          },
+        }));
+
+        try {
+          const { status, result } =
+            await currencyBridge.nftResolvers.nftMetadata({
+              contract,
+              tokenId,
+              currencyId: currency.id,
+            });
+
+          switch (status) {
+            case 500:
+              throw new Error("NFT Metadata Provider failed");
+            case 404:
+              setState((oldState) => ({
+                ...oldState,
+                cache: {
+                  ...oldState.cache,
+                  [key]: {
+                    status: "nodata",
+                    metadata: null,
+                    updatedAt: Date.now(),
+                  },
+                },
+              }));
+              break;
+            case 200:
+              setState((oldState) => ({
+                ...oldState,
+                cache: {
+                  ...oldState.cache,
+                  [key]: {
+                    status: "loaded",
+                    metadata: result,
+                    updatedAt: Date.now(),
+                  },
+                },
+              }));
+              break;
+            default:
+              break;
+          }
+        } catch (error) {
+          setState((oldState) => ({
+            ...oldState,
+            cache: {
+              ...oldState.cache,
+              [key]: {
+                status: "error",
+                error,
+                updatedAt: Date.now(),
+              },
+            },
+          }));
+        }
+      },
+
+      loadCollectionMetadata: async (contract: string, currencyId: string) => {
+        const key = getNftCollectionKey(contract, currencyId);
+        const currency = getCryptoCurrencyById(currencyId);
+        const currencyBridge = getCurrencyBridge(currency);
+
+        if (!currencyBridge?.nftResolvers?.collectionMetadata) {
+          throw new Error("Currency doesn't support Collection Metadata");
+        }
 
         setState((oldState) => ({
           ...oldState,
@@ -144,10 +230,11 @@ export function NftMetadataProvider({
         }));
 
         try {
-          const { status, result } = await metadataCallBatcher.load({
-            contract,
-            tokenId,
-          });
+          const { status, result } =
+            await currencyBridge.nftResolvers.collectionMetadata({
+              contract,
+              currencyId: currency.id,
+            });
 
           switch (status) {
             case 500:
@@ -172,7 +259,7 @@ export function NftMetadataProvider({
                   ...oldState.cache,
                   [key]: {
                     status: "loaded",
-                    metadata: result || {},
+                    metadata: result,
                     updatedAt: Date.now(),
                   },
                 },
@@ -206,6 +293,7 @@ export function NftMetadataProvider({
   );
 
   const value = { ...state, ...api };
+
   return (
     <NftMetadataContext.Provider value={value}>
       {children}

package/src/nft/NftMetadataProvider/types.ts

@@ -1,4 +1,7 @@
-import { NFTMetadataResponse } from "../../types";
+import {
+  NFTCollectionMetadataResponse,
+  NFTMetadataResponse,
+} from "../../types";
 
 export type NFTResourceQueued = {
   status: "queued";
@@ -10,7 +13,9 @@ export type NFTResourceLoading = {
 
 export type NFTResourceLoaded = {
   status: "loaded";
-  metadata: Pick<NFTMetadataResponse, "result">;
+  metadata:
+    | NFTMetadataResponse["result"]
+    | NFTCollectionMetadataResponse["result"];
   updatedAt: number;
 };
 
@@ -37,24 +42,42 @@ export type NFTMetadataContextState = {
 };
 
 export type NFTMetadataContextAPI = {
-  loadNFTMetadata: (contract: string, tokenId: string) => Promise<void>;
+  loadNFTMetadata: (
+    contract: string,
+    tokenId: string,
+    currencyId: string
+  ) => Promise<void>;
+  loadCollectionMetadata: (
+    contract: string,
+    currencyId: string
+  ) => Promise<void>;
   clearCache: () => void;
 };
 
 export type NFTMetadataContextType = NFTMetadataContextState &
   NFTMetadataContextAPI;
 
+export type Batcher = {
+  load: (
+    element:
+      | {
+          contract: string;
+          tokenId: string;
+        }
+      | {
+          contract: string;
+        }
+  ) => Promise<NFTMetadataResponse | NFTCollectionMetadataResponse>;
+};
+
 export type BatchElement = {
-  couple: {
-    contract: string;
-    tokenId: string;
-  };
+  element: any;
   resolve: (value: NFTMetadataResponse) => void;
   reject: (reason?: Error) => void;
 };
 
 export type Batch = {
-  couples: Array<BatchElement["couple"]>;
+  elements: Array<BatchElement["element"]>;
   resolvers: Array<BatchElement["resolve"]>;
   rejecters: Array<BatchElement["reject"]>;
 };

package/src/nft/helpers.ts

@@ -1,21 +1,26 @@
 import eip55 from "eip55";
 import BigNumber from "bignumber.js";
-import { NFT, Operation } from "../types";
 import { encodeNftId } from ".";
-
-type Collection = NFT["collection"];
-
-type CollectionMap<C> = Record<string, C>;
-
-export type CollectionWithNFT = Collection & {
-  nfts: Array<Omit<NFT, "collection">>;
-};
-
-export const nftsFromOperations = (ops: Operation[]): NFT[] => {
+import { decodeAccountId } from "../account";
+
+import type { Batch, BatchElement, Batcher } from "./NftMetadataProvider/types";
+import type {
+  NFTMetadataResponse,
+  Operation,
+  ProtoNFT,
+  NFT,
+  CryptoCurrency,
+  NFTCollectionMetadataResponse,
+} from "../types";
+import { API, apiForCurrency } from "../api/Ethereum";
+
+export const nftsFromOperations = (ops: Operation[]): ProtoNFT[] => {
   const nftsMap = ops
+    // make sure we have the operation in chronological order (older first)
+    .sort((a, b) => a.date.getTime() - b.date.getTime())
     // if ops are Operations get the prop nftOperations, else ops are considered nftOperations already
     .flatMap((op) => (op?.nftOperations?.length ? op.nftOperations : op))
-    .reduce((acc: Record<string, NFT>, nftOp: Operation) => {
+    .reduce((acc: Record<string, ProtoNFT>, nftOp: Operation) => {
       let { contract } = nftOp;
       if (!contract) {
         return acc;
@@ -24,20 +29,37 @@ export const nftsFromOperations = (ops: Operation[]): NFT[] => {
       // Creating a "token for a contract" unique key
       contract = eip55.encode(contract);
       const { tokenId, standard, accountId } = nftOp;
+      const { currencyId } = decodeAccountId(nftOp.accountId);
       if (!tokenId || !standard) return acc;
-      const id = encodeNftId(accountId, contract, tokenId || "");
+      const id = encodeNftId(accountId, contract, tokenId, currencyId);
 
       const nft = (acc[id] || {
         id,
         tokenId,
         amount: new BigNumber(0),
-        collection: { contract, standard },
-      }) as NFT;
+        contract,
+        standard,
+        currencyId,
+      }) as ProtoNFT;
 
       if (nftOp.type === "NFT_IN") {
         nft.amount = nft.amount.plus(nftOp.value);
       } else if (nftOp.type === "NFT_OUT") {
-        nft.amount = nft.amount.minus(nftOp.value);
+        const newAmount = nft.amount.minus(nftOp.value);
+
+        // In case of OpenSea lazy minting feature (minting an NFT off-chain)
+        // OpenSea will fire a false ERC1155 event saying that you sent an NFT
+        // from your account that you never received first.
+        //
+        // E.g.: I'm creating 10 ERC1155 on OpenSea. It's not going to create anything on-chain.
+        // Then I (bob) decide to transfer 5 to someone (kvn). OpenSea is going to mint the NFT in its
+        // collection (`OpenSea Shared Storefront` / `OpenSea Collections`) and transfer it to kvn.
+        // But the event fired by the Smart Contract is going to be `bob transfered 5 NFT to kvn` which is false.
+        // It would then result in bob have -5 NFTs since he never received them first.
+        // If kvn send 2 back to bob, based on the events we would think that bob has -3 NFTs.
+        //
+        // To mitigate that we put a minimum value of 0 when an account is transferring some NFTs.
+        nft.amount = newAmount.isNegative() ? new BigNumber(0) : newAmount;
       }
 
       acc[id] = nft;
@@ -48,31 +70,143 @@ export const nftsFromOperations = (ops: Operation[]): NFT[] => {
   return Object.values(nftsMap);
 };
 
+/**
+ * Helper to group NFTs by their collection/contract.
+ *
+ * It will either return an object { [contract address]: NFT[] }
+ * or if you specify a collectionAddress it will simply filter
+ * your NFTs for this specific contract and return an NFT[].
+ *
+ * The grouping here can be done with ProtoNFT or NFT.
+ */
 export const nftsByCollections = (
-  nfts: NFT[] = [],
+  nfts: Array<ProtoNFT | NFT> = [],
   collectionAddress?: string
-): CollectionWithNFT[] => {
-  const filteredNfts = collectionAddress
-    ? nfts.filter((n) => n.collection.contract === collectionAddress)
-    : nfts;
+): Record<string, Array<ProtoNFT | NFT>> | Array<ProtoNFT | NFT> => {
+  return collectionAddress
+    ? nfts.filter((n) => n.contract === collectionAddress)
+    : nfts.reduce((acc, nft) => {
+        const { contract } = nft;
 
-  const collectionMap = filteredNfts.reduce(
-    (acc: CollectionMap<CollectionWithNFT>, nft: NFT) => {
-      const { collection, ...nftWithoutCollection } = nft;
+        if (!acc[contract]) {
+          acc[contract] = [];
+        }
+        acc[contract].push(nft);
 
-      if (!acc[collection.contract]) {
-        acc[collection.contract] = { ...collection, nfts: [] };
-      }
-      acc[collection.contract].nfts.push(nftWithoutCollection);
+        return acc;
+      }, {});
+};
 
-      return acc;
-    },
-    {} as CollectionMap<CollectionWithNFT>
-  );
+export const getNftKey = (
+  contract: string,
+  tokenId: string,
+  currencyId: string
+): string => {
+  return `${currencyId}-${contract}-${tokenId}`;
+};
 
-  return Object.values(collectionMap);
+export const getNftCollectionKey = (
+  contract: string,
+  currencyId: string
+): string => {
+  return `${currencyId}-${contract}`;
 };
 
-export const getNftKey = (contract: string, tokenId: string): string => {
-  return `${contract}-${tokenId}`;
+/**
+ * Factory to make a metadata API call batcher.
+ *
+ * It will wait for a complete `tick` to accumulate all the metadata requests
+ * before sending it as one call to a given API.
+ * Once the response is received, it will then spread the metadata to each request Promise,
+ * just like if each request had been made separately.
+ */
+const makeBatcher = (
+  call: API["getNFTMetadata"] | API["getNFTCollectionMetadata"],
+  chainId: number
+): Batcher =>
+  (() => {
+    const queue: BatchElement[] = [];
+
+    let debounce;
+    const timeoutBatchCall = () => {
+      // Clear the previous scheduled call if it was existing
+      clearTimeout(debounce);
+
+      // Schedule a new call with the whole batch
+      debounce = setTimeout(() => {
+        // Seperate each batch element properties into arrays by type and index
+        const { elements, resolvers, rejecters } = queue.reduce(
+          (acc, { element, resolve, reject }) => {
+            acc.elements.push(element);
+            acc.resolvers.push(resolve);
+            acc.rejecters.push(reject);
+
+            return acc;
+          },
+          { elements: [], resolvers: [], rejecters: [] } as Batch
+        );
+        // Empty the queue
+        queue.length = 0;
+
+        // Make the call with all the couples of contract and tokenId at once
+        call(elements, chainId.toString())
+          .then((res: any) => {
+            // Resolve each batch element with its own resolver and only its response
+            res.forEach((metadata, index) => resolvers[index](metadata));
+          })
+          .catch((err) => {
+            // Reject all batch element with the error
+            rejecters.forEach((reject) => reject(err));
+          });
+      });
+    };
+
+    return {
+      // Load the metadata for a given couple contract + tokenId
+      load(
+        element:
+          | {
+              contract: string;
+              tokenId: string;
+            }
+          | { contract: string }
+      ): Promise<NFTMetadataResponse | NFTCollectionMetadataResponse> {
+        return new Promise((resolve, reject) => {
+          queue.push({ element, resolve, reject });
+          timeoutBatchCall();
+        });
+      },
+    };
+  })();
+
+const batchersMap = new Map();
+
+/**
+ * In order to `instanciate`/make only 1 batcher by currency,
+ * they're `cached` in a Map and retrieved by this method
+ * This method is still EVM based for now but can be improved
+ * to implement an even more generic solution
+ */
+export const metadataCallBatcher = (
+  currency: CryptoCurrency
+): { loadNft: Batcher["load"]; loadCollection: Batcher["load"] } => {
+  const api: API = apiForCurrency(currency);
+  const chainId = currency?.ethereumLikeInfo?.chainId;
+
+  if (!chainId || !api) {
+    throw new Error("Ethereum: No API or chainId for this Currency");
+  }
+
+  if (!batchersMap.has(currency.id)) {
+    batchersMap.set(currency.id, {
+      nft: makeBatcher(api.getNFTMetadata, chainId),
+      collection: makeBatcher(api.getNFTCollectionMetadata, chainId),
+    });
+  }
+
+  const batchers = batchersMap.get(currency.id);
+  return {
+    loadNft: batchers.nft.load,
+    loadCollection: batchers.collection.load,
+  };
 };

package/src/nft/nftId.ts

@@ -1,17 +1,26 @@
 export const encodeNftId = (
   accountId: string,
   contract: string,
-  tokenId: string
+  tokenId: string,
+  currencyId: string
 ): string => {
-  return `${accountId}+${contract}+${tokenId.toString()}`;
+  return `${accountId}+${contract}+${tokenId}+${currencyId}`;
 };
 
-export const decodeNftId = (id: string): unknown => {
-  const [accountId, contract, tokenId] = id.split("+");
+export const decodeNftId = (
+  id: string
+): {
+  accountId: string;
+  contract: string;
+  tokenId: string;
+  currencyId: string;
+} => {
+  const [accountId, contract, tokenId, currencyId] = id.split("+");
 
   return {
     accountId,
     contract,
     tokenId,
+    currencyId,
   };
 };

package/src/nft/support.ts

@@ -1,4 +1,4 @@
-import { Transaction, CryptoCurrency } from "../types";
+import { Transaction, CryptoCurrency, ProtoNFT } from "../types";
 import { getEnv } from "../env";
 
 export const isNftTransaction = (transaction: Transaction): boolean => {
@@ -12,3 +12,16 @@ export const isNftTransaction = (transaction: Transaction): boolean => {
 export function isNFTActive(currency: CryptoCurrency): boolean {
   return getEnv("NFT_CURRENCIES").split(",").includes(currency.id);
 }
+
+const nftCapabilities = {
+  hasQuantity: ["ERC1155"],
+};
+
+export const getNftCapabilities = (nft: ProtoNFT) =>
+  Object.entries(nftCapabilities).reduce(
+    (acc, [capability, standards]) => ({
+      ...acc,
+      [capability]: standards.includes(nft.standard),
+    }),
+    {}
+  );