packages/wallet/store/hooks/usePriceGraphData.ts

   1 import { useCallback, useEffect } from 'react';
   2
   3 import { createSelector } from '@reduxjs/toolkit';
   4
   5 import type { WasmFiatCurrencySymbol, WasmPriceGraph, WasmTimeframe } from '@proton/andromeda';
   6 import { baseUseSelector } from '@proton/react-redux-store';
   7 import { createHooks } from '@proton/redux-utilities';
   8
   9 import { getKey, priceGraphDataThunk, selectPriceGraphData } from '../slices/priceGraphData';
  10
  11 export const priceGraphDataHooks = createHooks(priceGraphDataThunk, selectPriceGraphData);
  12
  13 export const useGetPriceGraphData = () => {
  14     const get = priceGraphDataHooks.useGet();
  15     return useCallback(
  16         async (fiat: WasmFiatCurrencySymbol, timeframe: WasmTimeframe) => {
  17             const results = await get({ thunkArg: [fiat, timeframe] });
  18             const [key] = getKey(fiat, timeframe);
  19
  20             return results[key];
  21         },
  22         [get]
  23     );
  24 };
  25
  26 export const usePriceGraphData = (fiat: WasmFiatCurrencySymbol, timeframe: WasmTimeframe) => {
  27     const getPriceGraphData = useGetPriceGraphData();
  28     const [, loading] = priceGraphDataHooks.useValue();
  29
  30     const priceGraphDataSimpleSelector = createSelector(
  31         selectPriceGraphData,
  32         (result): [WasmPriceGraph | undefined, boolean] => {
  33             const key = getKey(fiat, timeframe);
  34
  35             const { value } = result;
  36             const rate = value?.[key];
  37
  38             return [rate, loading];
  39         }
  40     );
  41
  42     useEffect(() => {
  43         void getPriceGraphData(fiat, timeframe);
  44     }, [fiat, getPriceGraphData, timeframe]);
  45
  46     return baseUseSelector(priceGraphDataSimpleSelector);
  47 };