useCurrenciesByMarketcapWithStatus

src/currencies/index.ts

@@ -7,6 +7,7 @@ import {
   useMarketcapTickers,
   currenciesByMarketcap,
   useCurrenciesByMarketcap,
+  useCurrenciesByMarketcapWithStatus,
 } from "./sortByMarketcap";
 import {
   listFiatCurrencies,
@@ -54,6 +55,7 @@ export {
   useMarketcapTickers,
   currenciesByMarketcap,
   useCurrenciesByMarketcap,
+  useCurrenciesByMarketcapWithStatus,
   listFiatCurrencies,
   listCryptoCurrencies,
   getFiatCurrencyByTicker,

src/currencies/sortByMarketcap.ts

@@ -107,3 +107,36 @@ export const useCurrenciesByMarketcap = <C extends Currency>(
   const tickers = useMarketcapTickers();
   return tickers ? sortByMarketcap(currencies, tickers) : currencies;
 };
+
+type CurrenciesByMarketcapResult = {
+  loading: boolean;
+  error?: Error;
+  currencies?: any[];
+};
+
+export const useCurrenciesByMarketcapWithStatus = <C extends Currency>(
+  currencies: C[]
+): CurrenciesByMarketcapResult => {
+  const [status, setStatus] = useState<CurrenciesByMarketcapResult>({
+    loading: false,
+  });
+
+  useEffect(() => {
+    function getCurrenciesByMarketcap() {
+      setStatus({ loading: true });
+      getMarketcapTickers()
+        .then((tickers) => {
+          setStatus({
+            loading: false,
+            currencies: sortByMarketcap(currencies, tickers),
+          });
+        })
+        .catch((error: Error) => {
+          setStatus({ loading: false, error, currencies });
+        });
+    }
+    getCurrenciesByMarketcap();
+  }, []);
+
+  return status;
+};