@ledgerhq/live-countervalues-react 0.2.44-nightly.0 → 0.2.44-nightly.1

package/src/index.tsx

@@ -1,25 +1,14 @@
-import { BigNumber } from "bignumber.js";
-import React, {
-  createContext,
-  useMemo,
-  useContext,
-  useEffect,
-  useReducer,
-  useState,
-  useCallback,
-  ReactElement,
-} from "react";
 import { getAccountCurrency } from "@ledgerhq/coin-framework/account/helpers";
+import api from "@ledgerhq/live-countervalues/api/index";
 import {
-  initialState,
   calculate,
-  loadCountervalues,
   exportCountervalues,
   importCountervalues,
   inferTrackingPairForAccounts,
+  initialState,
+  loadCountervalues,
   trackingPairForTopCoins,
 } from "@ledgerhq/live-countervalues/logic";
-import api from "@ledgerhq/live-countervalues/api/index";
 import type {
   CounterValuesState,
   CounterValuesStateRaw,
@@ -28,8 +17,28 @@ import type {
 } from "@ledgerhq/live-countervalues/types";
 import { useDebounce } from "@ledgerhq/live-hooks/useDebounce";
 import { log } from "@ledgerhq/logs";
-import type { Account, AccountLike } from "@ledgerhq/types-live";
 import type { Currency, Unit } from "@ledgerhq/types-cryptoassets";
+import type { Account, AccountLike } from "@ledgerhq/types-live";
+import { BigNumber } from "bignumber.js";
+import React, {
+  ReactElement,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useReducer,
+  useState,
+} from "react";
+
+/** Bridge enabling platform-specific persistence of market-cap ids. */
+export interface CountervaluesMarketcapBridge {
+  useIds(): string[];
+  useLastUpdated(): number | undefined;
+  setLoading(loading: boolean): void;
+  setIds(ids: string[]): void;
+  setError(message: string): void;
+}
 
 // Polling is the control object you get from the high level <PollingConsumer>{ polling => ...
 export type Polling = {
@@ -48,6 +57,7 @@ export type Polling = {
   // if the last polling failed, there will be an error
   error: Error | null | undefined;
 };
+
 export type Props = {
   children: React.ReactNode;
   userSettings: CountervaluesSettings;
@@ -78,7 +88,6 @@ const CountervaluesUserSettingsContext = createContext<CountervaluesSettings>({
 });
 
 const CountervaluesContext = createContext<CounterValuesState>(initialState);
-
 const CountervaluesMarketcapIdsContext = createContext<string[]>([]);
 
 function trackingPairsHash(a: TrackingPair[]) {
@@ -90,80 +99,56 @@ function trackingPairsHash(a: TrackingPair[]) {
 
 const marketcapRefresh = 30 * 60000;
 const marketcapRefreshOnError = 60000;
-const initialIds: string[] = [];
-/**
- * Internal only. fetch the marketcap and keep it in sync.
- * the data is shared through a context, you can useMarketcapIds to get it.
- */
-function useMarketcap() {
-  const [ids, setIds] = useState<string[]>(initialIds);
-  const [fetchNonce, setFetchNonce] = useState(0);
+
+/** Provides market-cap ids via the supplied bridge. */
+export function CountervaluesMarketcapProvider({
+  children,
+  bridge,
+}: {
+  children: React.ReactNode;
+  bridge: CountervaluesMarketcapBridge;
+}): ReactElement {
+  const ids = bridge.useIds();
+  const lastUpdated = bridge.useLastUpdated();
+  const [, forceUpdate] = useReducer(x => x + 1, 0);
 
   useEffect(() => {
-    let timeout: NodeJS.Timeout | null = null;
-    api.fetchIdsSortedByMarketcap().then(
-      ids => {
-        setIds(ids);
-        timeout = setTimeout(() => setFetchNonce(n => n + 1), marketcapRefresh);
-      },
-      error => {
-        log("countervalues", "error fetching marketcap ids " + error);
-        timeout = setTimeout(() => setFetchNonce(n => n + 1), marketcapRefreshOnError);
-      },
-    );
+    let timeout: ReturnType<typeof setTimeout> | null = null;
+    const now = Date.now();
+
+    if (!lastUpdated || now - lastUpdated > marketcapRefresh) {
+      bridge.setLoading(true);
+      api.fetchIdsSortedByMarketcap().then(
+        fetchedIds => {
+          bridge.setIds(fetchedIds);
+          timeout = setTimeout(() => forceUpdate(), marketcapRefresh);
+        },
+        error => {
+          log("countervalues", "error fetching marketcap ids " + error);
+          bridge.setError(error.message);
+          timeout = setTimeout(() => forceUpdate(), marketcapRefreshOnError);
+        },
+      );
+    } else {
+      timeout = setTimeout(() => forceUpdate(), marketcapRefresh - (now - lastUpdated));
+    }
+
     return () => {
-      if (timeout) {
-        clearTimeout(timeout);
-      }
+      if (timeout) clearTimeout(timeout);
     };
-  }, [fetchNonce]);
+  }, [lastUpdated, bridge]);
 
-  return ids;
-}
-
-// infer the tracking pairs for the top coins that the portfolio needs to display itself
-// if startDate is undefined, the feature is disabled
-export function useTrackingPairsForTopCoins(
-  marketcapIds: string[],
-  countervalue: Currency,
-  size: number,
-  startDate: Date | undefined,
-) {
-  const dateTimestamp = startDate?.getTime();
-  return useMemo(
-    () =>
-      dateTimestamp
-        ? trackingPairForTopCoins(marketcapIds, size, countervalue, new Date(dateTimestamp))
-        : [],
-    [marketcapIds, countervalue, dateTimestamp, size],
-  );
-}
-
-export function useTrackingPairForAccounts(
-  accounts: Account[],
-  countervalue: Currency,
-): TrackingPair[] {
-  // first we cache the tracking pairs with its hash
-  const c = useMemo(() => {
-    const pairs = inferTrackingPairForAccounts(accounts, countervalue);
-    return { pairs, hash: trackingPairsHash(pairs) };
-  }, [accounts, countervalue]);
-  // we only want to return the pairs when the hash changes
-  // to not recalculate pairs as fast as accounts resynchronizes
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  return useMemo(() => c.pairs, [c.hash]);
-}
-
-export function CountervaluesMarketcap({ children }: { children: React.ReactNode }): ReactElement {
-  const marketcapIds = useMarketcap();
   return (
-    <CountervaluesMarketcapIdsContext.Provider value={marketcapIds}>
+    <CountervaluesMarketcapIdsContext.Provider value={ids}>
       {children}
     </CountervaluesMarketcapIdsContext.Provider>
   );
 }
 
-export function Countervalues({
+/**
+ * Root countervalues provider (polling + calculation).
+ */
+export function CountervaluesProvider({
   children,
   userSettings,
   pollInitDelay = 3 * 1000,
@@ -174,18 +159,20 @@ export function Countervalues({
   const debouncedUserSettings = useDebounce(userSettings, debounceDelay);
   const [{ state, pending, error }, dispatch] = useReducer(fetchReducer, initialFetchState);
 
+  // TODO this is always using the initial value, doesn't react to changes.
   const marketcapIds = useContext(CountervaluesMarketcapIdsContext);
-
   const { marketCapBatchingAfterRank } = userSettings;
-  const batchStrategySolver = useMemo(() => {
-    return {
+
+  const batchStrategySolver = useMemo(
+    () => ({
       shouldBatchCurrencyFrom: (currency: Currency) => {
         if (currency.type === "FiatCurrency") return false;
         const i = marketcapIds.indexOf(currency.id);
         return i === -1 || i > marketCapBatchingAfterRank;
       },
-    };
-  }, [marketCapBatchingAfterRank, marketcapIds]);
+    }),
+    [marketCapBatchingAfterRank, marketcapIds],
+  );
 
   // flag used to trigger a loadCountervalues
   const [triggerLoad, setTriggerLoad] = useState(false);
@@ -198,28 +185,15 @@ export function Countervalues({
   useEffect(() => {
     if (pending || !triggerLoad) return;
     setTriggerLoad(false);
-    dispatch({
-      type: "pending",
-    });
-
+    dispatch({ type: "pending" });
     loadCountervalues(
       state,
       userSettings,
       batchStrategySolver,
       userSettings.granularitiesRates,
     ).then(
-      state => {
-        dispatch({
-          type: "success",
-          payload: state,
-        });
-      },
-      error => {
-        dispatch({
-          type: "error",
-          payload: error,
-        });
-      },
+      newState => dispatch({ type: "success", payload: newState }),
+      e => dispatch({ type: "error", payload: e }),
     );
   }, [pending, state, userSettings, triggerLoad, batchStrategySolver]);
 
@@ -229,31 +203,25 @@ export function Countervalues({
     dispatch({
       type: "setCounterValueState",
       payload: importCountervalues(savedState, userSettings),
-    }); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [savedState]);
+    });
+  }, [savedState, userSettings]);
 
   // manage the auto polling loop and the interface for user land to trigger a reload
   const [isPolling, setIsPolling] = useState(true);
   useEffect(() => {
     if (!isPolling) return;
-    let pollingTimeout: NodeJS.Timeout;
-
+    let pollingTimeout: ReturnType<typeof setTimeout>;
     function pollingLoop() {
       setTriggerLoad(true);
       pollingTimeout = setTimeout(pollingLoop, autopollInterval);
     }
-
     pollingTimeout = setTimeout(pollingLoop, pollInitDelay);
     return () => clearTimeout(pollingTimeout);
   }, [autopollInterval, pollInitDelay, isPolling]);
 
   const polling = useMemo<Polling>(
     () => ({
-      wipe: () => {
-        dispatch({
-          type: "wipe",
-        });
-      },
+      wipe: () => dispatch({ type: "wipe" }),
       poll: () => setTriggerLoad(true),
       start: () => setIsPolling(true),
       stop: () => setIsPolling(false),
@@ -273,65 +241,42 @@ export function Countervalues({
 }
 
 type Action =
-  | {
-      type: "success";
-      payload: CounterValuesState;
-    }
-  | {
-      type: "error";
-      payload: Error;
-    }
-  | {
-      type: "pending";
-    }
-  | {
-      type: "wipe";
-    }
-  | {
-      type: "setCounterValueState";
-      payload: CounterValuesState;
-    };
+  | { type: "success"; payload: CounterValuesState }
+  | { type: "error"; payload: Error }
+  | { type: "pending" }
+  | { type: "wipe" }
+  | { type: "setCounterValueState"; payload: CounterValuesState };
 
-type FetchState = {
-  state: CounterValuesState;
-  pending: boolean;
-  error?: Error;
-};
-const initialFetchState: FetchState = {
-  state: initialState,
-  pending: false,
-};
+type FetchState = { state: CounterValuesState; pending: boolean; error?: Error };
+const initialFetchState: FetchState = { state: initialState, pending: false };
 
 function fetchReducer(state: FetchState, action: Action): FetchState {
   switch (action.type) {
     case "success":
-      return {
-        state: action.payload,
-        pending: false,
-        error: undefined,
-      };
-
+      return { state: action.payload, pending: false, error: undefined };
     case "error":
       return { ...state, pending: false, error: action.payload };
-
     case "pending":
       return { ...state, pending: true, error: undefined };
-
     case "wipe":
-      return {
-        state: initialState,
-        pending: false,
-        error: undefined,
-      };
-
+      return { state: initialState, pending: false, error: undefined };
     case "setCounterValueState":
       return { ...state, state: action.payload };
-
     default:
       return state;
   }
 }
 
+/** Returns market-cap ids. */
+export function useMarketcapIds(): string[] {
+  return useContext(CountervaluesMarketcapIdsContext);
+}
+
+/** Returns the full countervalues state. */
+export function useCountervaluesState(): CounterValuesState {
+  return useContext(CountervaluesContext);
+}
+
 // allows consumer to access the countervalues polling control object
 export function useCountervaluesPolling(): Polling {
   return useContext(CountervaluesPollingContext);
@@ -342,19 +287,9 @@ export function useCountervaluesUserSettingsContext(): CountervaluesSettings {
   return useContext(CountervaluesUserSettingsContext);
 }
 
-// allows consumer to access the countervalues state
-export function useCountervaluesState(): CounterValuesState {
-  return useContext(CountervaluesContext);
-}
-
-// allows consumer to access the coins ids sorted by marketcap. It's basically all the coins that the API supports.
-export function useMarketcapIds(): string[] {
-  return useContext(CountervaluesMarketcapIdsContext);
-}
-
 // provides an export of the countervalues state
 export function useCountervaluesExport(): CounterValuesStateRaw {
-  const state = useContext(CountervaluesContext);
+  const state = useCountervaluesState();
   return useMemo(() => exportCountervalues(state), [state]);
 }
 
@@ -379,7 +314,7 @@ export function useCalculateCountervalueCallback({
 }): (from: Currency, value: BigNumber) => BigNumber | null | undefined {
   const state = useCountervaluesState();
   return useCallback(
-    (from: Currency, value: BigNumber): BigNumber | null | undefined => {
+    (from: Currency, value: BigNumber) => {
       const countervalue = calculate(state, {
         value: value.toNumber(),
         from,
@@ -392,6 +327,7 @@ export function useCalculateCountervalueCallback({
   );
 }
 
+/** Helper for send-flow: returns fiat amount and reverse calculation. */
 export function useSendAmount({
   account,
   fiatCurrency,
@@ -416,22 +352,49 @@ export function useSendAmount({
   const fiatUnit = fiatCurrency.units[0];
   const state = useCountervaluesState();
   const calculateCryptoAmount = useCallback(
-    (fiatAmount: BigNumber) => {
-      const cryptoAmount = new BigNumber(
+    (fiatAmount: BigNumber) =>
+      new BigNumber(
         calculate(state, {
           from: cryptoCurrency,
           to: fiatCurrency,
           value: fiatAmount.toNumber(),
           reverse: true,
         }) ?? 0,
-      );
-      return cryptoAmount;
-    },
+      ),
     [state, cryptoCurrency, fiatCurrency],
   );
-  return {
-    fiatAmount,
-    fiatUnit,
-    calculateCryptoAmount,
-  };
+  return { fiatAmount, fiatUnit, calculateCryptoAmount };
+}
+
+// infer the tracking pairs for the top coins that the portfolio needs to display itself
+// if startDate is undefined, the feature is disabled
+export function useTrackingPairsForTopCoins(
+  marketcapIds: string[],
+  countervalue: Currency,
+  size: number,
+  startDate: Date | undefined,
+) {
+  const dateTimestamp = startDate?.getTime();
+  return useMemo(
+    () =>
+      dateTimestamp
+        ? trackingPairForTopCoins(marketcapIds, size, countervalue, new Date(dateTimestamp))
+        : [],
+    [marketcapIds, countervalue, dateTimestamp, size],
+  );
+}
+
+export function useTrackingPairForAccounts(
+  accounts: Account[],
+  countervalue: Currency,
+): TrackingPair[] {
+  // first we cache the tracking pairs with its hash
+  const c = useMemo(() => {
+    const pairs = inferTrackingPairForAccounts(accounts, countervalue);
+    return { pairs, hash: trackingPairsHash(pairs) };
+  }, [accounts, countervalue]);
+  // we only want to return the pairs when the hash changes
+  // to not recalculate pairs as fast as accounts resynchronizes
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useMemo(() => c.pairs, [c.hash]);
 }