[web] Make APIs work again

packages/bento-core/chains/index.ts

@@ -1,4 +1,4 @@
-import { Config, safePromiseAllV1 } from '@bento/common';
+import { Config, safePromiseAll } from '@bento/common';
 import { JsonRpcProvider } from '@ethersproject/providers';
 import * as web3 from '@solana/web3.js';
 import axios, { Axios } from 'axios';
@@ -95,7 +95,7 @@ export class EthereumChain implements Chain {
         price,
       };
     }) as Promise<TokenBalance>[];
-    return safePromiseAllV1(promises);
+    return safePromiseAll(promises).then((items) => items.flat());
   };
 }
 
@@ -170,7 +170,7 @@ export class BNBChain implements Chain {
         price,
       };
     }) as Promise<TokenBalance>[];
-    return safePromiseAllV1(promises);
+    return safePromiseAll(promises).then((items) => items.flat());
   };
 }
 
@@ -245,7 +245,7 @@ export class PolygonChain implements Chain {
         price,
       };
     }) as Promise<TokenBalance>[];
-    return safePromiseAllV1(promises);
+    return safePromiseAll(promises).then((items) => items.flat());
   };
 }
 
@@ -320,7 +320,7 @@ export class AvalancheChain implements Chain {
         price,
       };
     }) as Promise<TokenBalance>[];
-    return safePromiseAllV1(promises);
+    return safePromiseAll(promises).then((items) => items.flat());
   };
 }
 
@@ -430,7 +430,7 @@ export class KlaytnChain implements Chain {
       };
       return balanceInfo;
     }) as Promise<TokenBalance>[];
-    return safePromiseAllV1(promises);
+    return safePromiseAll(promises).then((items) => items.flat());
   };
 }
 
@@ -507,7 +507,7 @@ export class SolanaChain implements Chain {
         price,
       };
     }) as Promise<TokenBalance>[];
-    return safePromiseAllV1(promises);
+    return safePromiseAll(promises).then((items) => items.flat());
   };
 }
 

packages/bento-web/pages/_app.tsx

@@ -16,7 +16,7 @@ import styled from 'styled-components';
 
 import { LoadingProgress } from '@/components/LoadingProgress';
 import { NavigationBar } from '@/components/NavigationBar';
-import { PricingsProvider } from '@/hooks/pricings';
+import { PricingsProvider } from '@/hooks/useCachedPricings';
 import { GlobalStyle } from '@/styles/GlobalStyle';
 
 Analytics.initialize();

packages/bento-web/pages/api/defis/klaytn/[walletAddress].ts

@@ -224,7 +224,7 @@ const getDeFiStakingsByWalletAddress = async (
   const promisesForDelegations = KlayStation.getDelegations(walletAddress);
 
   const stakings = (
-    await safePromiseAllV1([
+    await Promise.all([
       promisesForStakings.catch(handleError),
       promisesForDelegations.catch(handleError),
     ])

packages/bento-web/src/dashboard/utils/useDeFis.ts

@@ -1,7 +1,7 @@
 import { Wallet } from '@bento/common';
 import { useEffect, useMemo, useState } from 'react';
 
-import { useCachedPricings } from '@/hooks/pricings';
+import { useCachedPricings } from '@/hooks/useCachedPricings';
 
 import {
   Valuation,

packages/bento-web/src/dashboard/utils/useNFTBalances.ts

@@ -4,7 +4,7 @@ import chunk from 'lodash.chunk';
 import groupBy from 'lodash.groupby';
 import { useEffect, useState } from 'react';
 
-import { useCachedPricings } from '@/hooks/pricings';
+import { useCachedPricings } from '@/hooks/useCachedPricings';
 
 import { NFTWalletBalance } from '@/dashboard/types/WalletBalance';
 

packages/bento-web/src/dashboard/utils/useWalletBalances.ts

@@ -2,7 +2,7 @@ import { Wallet } from '@bento/common';
 import produce from 'immer';
 import { useEffect, useMemo, useState } from 'react';
 
-import { useCachedPricings } from '@/hooks/pricings';
+import { useCachedPricings } from '@/hooks/useCachedPricings';
 
 import { KEYS_BY_NETWORK } from '@/constants/networks';
 import {

packages/bento-web/src/defi/klaytn/utils/getDeFiStakingValue.ts

@@ -1,6 +1,6 @@
 import { TokenInput } from '@bento/core';
 
-import { GetCachedPrice } from '@/hooks/pricings';
+import { GetCachedPrice } from '@/hooks/useCachedPricings';
 
 import {
   AmountWithOptionalValue,

packages/bento-web/src/hooks/pricings.tsx → packages/bento-web/src/hooks/useCachedPricings.tsx

@@ -1,12 +1,13 @@
 import { safePromiseAll } from '@bento/common';
 import { pricesFromCoinGecko } from '@bento/core';
 import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai';
-import React, { useCallback } from 'react';
+import React, { useMemo } from 'react';
 
 import { useInterval } from '@/hooks/useInterval';
 
 import { Config } from '@/utils';
 
+import { useClientCallback } from './useClientCallback';
 import { useLazyEffect } from './useLazyEffect';
 
 const SECONDS = 1_000;
@@ -27,70 +28,77 @@ const buildCacheStore = <T extends any>(prefix: string) => ({
     localStorage.setItem(prefix, JSON.stringify({ ...prev, [key]: value }));
   },
 });
-const CacheStore = buildCacheStore('@pricings');
 
 type PricingMap = Record<string, number>;
 export const pricingsAtom = atom<PricingMap>({});
 export const coinGeckoIdsAtom = atom<string[]>([]);
 
 const useCoinGeckoPrices = () => {
+  const CacheStore = useMemo(() => buildCacheStore('@pricings'), []);
+
   const coinGeckoIds = useAtomValue(coinGeckoIdsAtom);
   const [prices, setPrices] = useAtom(pricingsAtom);
 
-  const fetchPrices = useCallback(async () => {
-    if (!coinGeckoIds.length) {
-      return;
-    }
-
-    if (Config.ENVIRONMENT !== 'production') {
-      console.log('hit');
-    }
-
-    const cachedIds: string[] = [];
-    const cachedPrices = await safePromiseAll(
-      coinGeckoIds.map(async (coinGeckoId) => {
-        const cachedValue = await CacheStore.get(coinGeckoId).catch(() => null);
-        if (!cachedValue) {
-          return [coinGeckoId, 0];
-        }
-        const [value, cachedAt] = cachedValue as ValueVO;
-
-        if (cachedAt >= Date.now() - CACHE_TIME) {
-          cachedIds.push(coinGeckoId);
-          return [coinGeckoId, value];
-        }
-
-        return [coinGeckoId, 0];
-      }),
-    );
-    let cachedPricesObject: PricingMap | null = null;
-    if (cachedPrices.length > 0) {
-      cachedPricesObject = Object.fromEntries(cachedPrices);
-      setPrices(cachedPricesObject as PricingMap);
-    }
-
-    const cachedIdsSet = new Set(cachedIds);
-    const uncachedIds = coinGeckoIds.filter((id) => !cachedIdsSet.has(id));
-
-    const fetchedPrices =
-      uncachedIds.length === 0
-        ? []
-        : await pricesFromCoinGecko(uncachedIds).then((prices) =>
-            Object.entries(prices),
+  const fetchPrices = useClientCallback(
+    async () => {
+      if (!coinGeckoIds.length) {
+        return;
+      }
+
+      if (Config.ENVIRONMENT !== 'production') {
+        console.log('hit');
+      }
+
+      const cachedIds: string[] = [];
+      const cachedPrices = await safePromiseAll(
+        coinGeckoIds.map(async (coinGeckoId) => {
+          const cachedValue = await CacheStore.get(coinGeckoId).catch(
+            () => null,
           );
-    await safePromiseAll(
-      fetchedPrices.map(([key, price]) =>
-        CacheStore.set(key, [price, Date.now()]),
-      ),
-    );
+          if (!cachedValue) {
+            return [coinGeckoId, 0];
+          }
+          const [value, cachedAt] = cachedValue as ValueVO;
 
-    const fetchedPricesObject = Object.fromEntries(fetchedPrices);
+          if (cachedAt >= Date.now() - CACHE_TIME) {
+            cachedIds.push(coinGeckoId);
+            return [coinGeckoId, value];
+          }
 
-    setPrices({
-      ...cachedPricesObject,
-      ...fetchedPricesObject,
-    });
-  }, [JSON.stringify(coinGeckoIds)]);
+          return [coinGeckoId, 0];
+        }),
+      );
+      let cachedPricesObject: PricingMap | null = null;
+      if (cachedPrices.length > 0) {
+        cachedPricesObject = Object.fromEntries(cachedPrices);
+        setPrices(cachedPricesObject as PricingMap);
+      }
+
+      const cachedIdsSet = new Set(cachedIds);
+      const uncachedIds = coinGeckoIds.filter((id) => !cachedIdsSet.has(id));
+
+      const fetchedPrices =
+        uncachedIds.length === 0
+          ? []
+          : await pricesFromCoinGecko(uncachedIds).then((prices) =>
+              Object.entries(prices),
+            );
+      await safePromiseAll(
+        fetchedPrices.map(([key, price]) =>
+          CacheStore.set(key, [price, Date.now()]),
+        ),
+      );
+
+      const fetchedPricesObject = Object.fromEntries(fetchedPrices);
+
+      setPrices({
+        ...cachedPricesObject,
+        ...fetchedPricesObject,
+      });
+    },
+    [JSON.stringify(coinGeckoIds)],
+    () => {},
+  );
 
   useLazyEffect(
     () => {
@@ -121,7 +129,7 @@ export const PricingsProvider: React.FC<React.PropsWithChildren> = ({
   const [prices] = useAtom(pricingsAtom);
   const setCoinGeckoIds = useSetAtom(coinGeckoIdsAtom);
 
-  const getCachedPrice = useCallback(
+  const getCachedPrice = useClientCallback(
     (coinGeckoId: string | string[]) => {
       const single = typeof coinGeckoId === 'string';
       const ids = single ? [coinGeckoId] : coinGeckoId;
@@ -135,6 +143,7 @@ export const PricingsProvider: React.FC<React.PropsWithChildren> = ({
       return single ? res[0] : res;
     },
     [prices],
+    () => 0,
   ) as GetCachedPrice;
 
   return (

packages/bento-web/src/hooks/useClientCallback.ts

@@ -0,0 +1,18 @@
+import { DependencyList, useCallback } from 'react';
+
+import { isServer } from '@/utils';
+
+export const useClientCallback = <T extends Function>(
+  callback: T,
+  deps: DependencyList,
+  fallback: T,
+): T => {
+  const func = useCallback(() => {
+    if (isServer()) {
+      return fallback();
+    }
+    return callback();
+  }, deps);
+
+  return func as any as T;
+};

packages/bento-web/src/hooks/useLazyEffect.ts

@@ -8,17 +8,20 @@ import {
 
 import { debounce } from '@/utils/debounce';
 
+import { useClientCallback } from './useClientCallback';
+
 export function useLazyEffect(
   effect: EffectCallback,
   deps: DependencyList = [],
   wait: number,
 ) {
   const cleanUp = useRef<void | (() => void)>();
   const effectRef = useRef<EffectCallback>();
-  effectRef.current = useCallback(effect, deps);
-  const lazyEffect = useCallback(
+  effectRef.current = useClientCallback(effect, deps, () => {});
+  const lazyEffect = useClientCallback(
     debounce(() => (cleanUp.current = effectRef.current?.()), wait),
     [],
+    () => {},
   );
   useEffect(lazyEffect, deps);
   useEffect(() => {

packages/bento-web/src/utils/devices.ts

@@ -0,0 +1,2 @@
+export const isServer = (): boolean =>
+  typeof window === 'undefined' && typeof global !== 'undefined';

packages/bento-web/src/utils/index.ts

@@ -2,6 +2,7 @@ export { Analytics, type AnalyticsEvent } from './analytics';
 export { axios } from './axios';
 export { copyToClipboard } from './clipboard';
 export { Config } from './Config';
+export { isServer } from './devices';
 export { FeatureFlags } from './FeatureFlag';
 export { Supabase } from './Supabase';
 export { throttle } from './throttle';