@ledgerhq/live-countervalues-react 0.1.0

package/src/index.tsx

@@ -0,0 +1,329 @@
+import { BigNumber } from "bignumber.js";
+import React, {
+  createContext,
+  useMemo,
+  useContext,
+  useEffect,
+  useReducer,
+  useState,
+  useCallback,
+  ReactElement,
+} from "react";
+import { getAccountCurrency, getAccountUnit } from "@ledgerhq/coin-framework/account/helpers";
+import {
+  initialState,
+  calculate,
+  loadCountervalues,
+  exportCountervalues,
+  importCountervalues,
+  inferTrackingPairForAccounts,
+} from "@ledgerhq/live-countervalues/logic";
+import type {
+  CounterValuesState,
+  CounterValuesStateRaw,
+  CountervaluesSettings,
+  TrackingPair,
+} from "@ledgerhq/live-countervalues/types";
+import { useDebounce } from "@ledgerhq/live-hooks/useDebounce";
+import type { Account, AccountLike } from "@ledgerhq/types-live";
+import type { Currency, Unit } from "@ledgerhq/types-cryptoassets";
+
+// Polling is the control object you get from the high level <PollingConsumer>{ polling => ...
+export type Polling = {
+  // completely wipe all countervalues
+  wipe: () => void;
+  // one shot poll function
+  // TODO: is there any usecases returning promise here?
+  // It's a bit tricky to return Promise with current impl
+  poll: () => void;
+  // start background polling
+  start: () => void;
+  // stop background polling
+  stop: () => void;
+  // true when the polling is in progress
+  pending: boolean;
+  // if the last polling failed, there will be an error
+  error: Error | null | undefined;
+};
+export type Props = {
+  children: React.ReactNode;
+  userSettings: CountervaluesSettings;
+  // the time to wait before the first poll when app starts (allow things to render to not do all at boot time)
+  pollInitDelay?: number;
+  // the minimum time to wait before two automatic polls (then one that happen whatever network/appstate events)
+  autopollInterval?: number;
+  // debounce time before actually fetching
+  debounceDelay?: number;
+  savedState?: CounterValuesStateRaw;
+};
+
+const CountervaluesPollingContext = createContext<Polling>({
+  wipe: () => {},
+  poll: () => {},
+  start: () => {},
+  stop: () => {},
+  pending: false,
+  error: null,
+});
+
+const CountervaluesContext = createContext<CounterValuesState>(initialState);
+
+function trackingPairsHash(a: TrackingPair[]) {
+  return a
+    .map(p => `${p.from.ticker}:${p.to.ticker}:${p.startDate.toISOString().slice(0, 10) || ""}`)
+    .sort()
+    .join("|");
+}
+
+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 Countervalues({
+  children,
+  userSettings,
+  pollInitDelay = 3 * 1000,
+  autopollInterval = 8 * 60 * 1000,
+  debounceDelay = 1000,
+  savedState,
+}: Props): ReactElement {
+  const debouncedUserSettings = useDebounce(userSettings, debounceDelay);
+  const [{ state, pending, error }, dispatch] = useReducer(fetchReducer, initialFetchState);
+
+  // flag used to trigger a loadCountervalues
+  const [triggerLoad, setTriggerLoad] = useState(false);
+  // trigger poll only when userSettings changes. in a debounced way.
+  useEffect(() => {
+    setTriggerLoad(true);
+  }, [debouncedUserSettings]);
+
+  // loadCountervalues logic
+  useEffect(() => {
+    if (pending || !triggerLoad) return;
+    setTriggerLoad(false);
+    dispatch({
+      type: "pending",
+    });
+
+    loadCountervalues(state, userSettings).then(
+      state => {
+        dispatch({
+          type: "success",
+          payload: state,
+        });
+      },
+      error => {
+        dispatch({
+          type: "error",
+          payload: error,
+        });
+      },
+    );
+  }, [pending, state, userSettings, triggerLoad]);
+
+  // save the state when it changes
+  useEffect(() => {
+    if (!savedState?.status || !Object.keys(savedState.status).length) return;
+    dispatch({
+      type: "setCounterValueState",
+      payload: importCountervalues(savedState, userSettings),
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [savedState]);
+
+  // 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;
+
+    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",
+        });
+      },
+      poll: () => setTriggerLoad(true),
+      start: () => setIsPolling(true),
+      stop: () => setIsPolling(false),
+      pending,
+      error,
+    }),
+    [pending, error],
+  );
+
+  return (
+    <CountervaluesPollingContext.Provider value={polling}>
+      <CountervaluesContext.Provider value={state}>{children}</CountervaluesContext.Provider>
+    </CountervaluesPollingContext.Provider>
+  );
+}
+
+type Action =
+  | {
+      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,
+};
+
+function fetchReducer(state: FetchState, action: Action): FetchState {
+  switch (action.type) {
+    case "success":
+      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,
+      };
+
+    case "setCounterValueState":
+      return { ...state, state: action.payload };
+
+    default:
+      return state;
+  }
+}
+
+export function useCountervaluesPolling(): Polling {
+  return useContext(CountervaluesPollingContext);
+}
+export function useCountervaluesState(): CounterValuesState {
+  return useContext(CountervaluesContext);
+}
+export function useCountervaluesExport(): CounterValuesStateRaw {
+  const state = useContext(CountervaluesContext);
+  return useMemo(() => exportCountervalues(state), [state]);
+}
+export function useCalculate(query: {
+  value: number;
+  from: Currency;
+  to: Currency;
+  disableRounding?: boolean;
+  date?: Date | null | undefined;
+  reverse?: boolean;
+}): number | null | undefined {
+  const state = useCountervaluesState();
+  return calculate(state, query);
+}
+
+export function useCalculateCountervalueCallback({
+  to,
+}: {
+  to: Currency;
+}): (from: Currency, value: BigNumber) => BigNumber | null | undefined {
+  const state = useCountervaluesState();
+  return useCallback(
+    (from: Currency, value: BigNumber): BigNumber | null | undefined => {
+      const countervalue = calculate(state, {
+        value: value.toNumber(),
+        from,
+        to,
+        disableRounding: true,
+      });
+      return typeof countervalue === "number" ? new BigNumber(countervalue) : countervalue;
+    },
+    [to, state],
+  );
+}
+
+export function useSendAmount({
+  account,
+  fiatCurrency,
+  cryptoAmount,
+}: {
+  account: AccountLike;
+  fiatCurrency: Currency;
+  cryptoAmount: BigNumber;
+}): {
+  cryptoUnit: Unit;
+  fiatAmount: BigNumber;
+  fiatUnit: Unit;
+  calculateCryptoAmount: (fiatAmount: BigNumber) => BigNumber;
+} {
+  const cryptoCurrency = getAccountCurrency(account);
+  const fiatCountervalue = useCalculate({
+    from: cryptoCurrency,
+    to: fiatCurrency,
+    value: cryptoAmount.toNumber(),
+    disableRounding: true,
+  });
+  const fiatAmount = new BigNumber(fiatCountervalue ?? 0);
+  const fiatUnit = fiatCurrency.units[0];
+  const cryptoUnit = getAccountUnit(account);
+  const state = useCountervaluesState();
+  const calculateCryptoAmount = useCallback(
+    (fiatAmount: BigNumber) => {
+      const cryptoAmount = new BigNumber(
+        calculate(state, {
+          from: cryptoCurrency,
+          to: fiatCurrency,
+          value: fiatAmount.toNumber(),
+          reverse: true,
+        }) ?? 0,
+      );
+      return cryptoAmount;
+    },
+    [state, cryptoCurrency, fiatCurrency],
+  );
+  return {
+    cryptoUnit,
+    fiatAmount,
+    fiatUnit,
+    calculateCryptoAmount,
+  };
+}

package/src/react.test.ts

@@ -0,0 +1,117 @@
+import { useTrackingPairForAccounts } from ".";
+import { genAccount } from "@ledgerhq/coin-framework/mocks/account";
+import { renderHook, act } from "@testing-library/react";
+import { getFiatCurrencyByTicker } from "@ledgerhq/cryptoassets";
+import { inferTrackingPairForAccounts } from "@ledgerhq/live-countervalues/logic";
+import { TrackingPair } from "@ledgerhq/live-countervalues/types";
+
+describe("useTrackingPairForAccounts", () => {
+  const accounts = Array(20)
+    .fill(null)
+    .map((_, i) => genAccount("test" + i));
+  const usd = getFiatCurrencyByTicker("USD");
+  const eur = getFiatCurrencyByTicker("EUR");
+  const trackingPairs = inferTrackingPairForAccounts(accounts, usd);
+
+  test("it returns same tracking pairs as when using inferTrackingPairForAccounts", async () => {
+    const { result } = renderHook(() => useTrackingPairForAccounts(accounts, usd));
+    await act(async () => {
+      expect(result.current).toEqual(trackingPairs);
+    });
+  });
+
+  test("a re-render preserve the reference", async () => {
+    const { result, rerender } = renderHook(() => useTrackingPairForAccounts(accounts, usd));
+    let initial: TrackingPair[] | undefined;
+    await act(async () => {
+      initial = result.current;
+    });
+    rerender();
+    await act(async () => {
+      expect(result.current).toBe(initial);
+    });
+  });
+
+  test("a re-render preserve the reference even when accounts change", async () => {
+    const { result, rerender } = renderHook(() =>
+      useTrackingPairForAccounts(accounts.slice(0), usd),
+    );
+    let initial: TrackingPair[] | undefined;
+    await act(async () => {
+      initial = result.current;
+    });
+    rerender();
+    await act(async () => {
+      expect(result.current).toBe(initial);
+    });
+  });
+
+  test("when accounts appears, it properly converge to the trackingPairs", async () => {
+    const { result, rerender } = renderHook(added =>
+      useTrackingPairForAccounts(!added ? [] : accounts, usd),
+    );
+    await act(async () => {
+      expect(result.current).toEqual([]);
+    });
+    rerender(true);
+    await act(async () => {
+      expect(result.current).toEqual(trackingPairs);
+    });
+  });
+
+  test("when accounts changes fundamentally, pairs change", async () => {
+    const { result, rerender } = renderHook(empty =>
+      useTrackingPairForAccounts(empty ? [] : accounts, usd),
+    );
+    await act(async () => {
+      expect(result.current).toEqual(trackingPairs);
+    });
+    rerender(true);
+    await act(async () => {
+      expect(result.current).toEqual([]);
+    });
+  });
+
+  test("when currency changes, pairs change", async () => {
+    const { result, rerender } = renderHook(usesEur =>
+      useTrackingPairForAccounts(accounts, usesEur ? eur : usd),
+    );
+    await act(async () => {
+      expect(result.current).toEqual(trackingPairs);
+    });
+    rerender(true);
+    await act(async () => {
+      expect(result.current).not.toEqual(trackingPairs);
+    });
+  });
+
+  test("if accounts reorder, it doesn't change", async () => {
+    const reverse = accounts.slice(0).reverse();
+    const { result, rerender } = renderHook(rev =>
+      useTrackingPairForAccounts(rev ? reverse : accounts, usd),
+    );
+    let initial: TrackingPair[] | undefined;
+    await act(async () => {
+      initial = result.current;
+    });
+    rerender(true);
+    await act(async () => {
+      expect(result.current).toBe(initial);
+    });
+  });
+
+  test("if accounts doubles, it doesn't change", async () => {
+    const doubled = accounts.concat(accounts);
+    const { result, rerender } = renderHook(d =>
+      useTrackingPairForAccounts(d ? doubled : accounts, usd),
+    );
+    let initial: TrackingPair[] | undefined;
+    await act(async () => {
+      initial = result.current;
+    });
+    rerender(true);
+    await act(async () => {
+      expect(result.current).toBe(initial);
+    });
+  });
+});

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.base",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "module": "commonjs",
+    "downlevelIteration": true,
+    "jsx": "react",
+    "lib": ["es2020", "dom"],
+    "outDir": "lib"
+  },
+  "include": ["src/**/*"]
+}