TW-687 Use balances from TZKT whenever possible

src/app/ConfirmPage.tsx

@@ -428,7 +428,7 @@ const AccountIcon: FC<OptionRenderProps<TempleAccount>> = ({ item }) => (
 
 const AccountOptionContentHOC = (networkRpc: string) =>
   memo<OptionRenderProps<TempleAccount>>(({ item: acc }) => {
-    const { assetName } = useGasToken();
+    const { assetName } = useGasToken(networkRpc);
 
     return (
       <>

src/app/hooks/AliceBob/use-disabled-proceed.ts

@@ -2,7 +2,8 @@ import { useMemo } from 'react';
 
 import BigNumber from 'bignumber.js';
 
-import { useAccount, useBalance } from 'lib/temple/front';
+import { useAccount } from 'lib/temple/front';
+import { useBalance } from 'lib/temple/front/balance';
 
 export const useDisabledProceed = (
   inputAmount: number | undefined,

src/app/pages/Collectibles/CollectiblePage/PropertiesItems.tsx

@@ -6,7 +6,8 @@ import { HashChip, ExternalLinkChip } from 'app/atoms';
 import type { CollectibleDetails } from 'app/store/collectibles/state';
 import { fromFa2TokenSlug } from 'lib/assets/utils';
 import { formatDate } from 'lib/i18n';
-import { useBalance, useExplorerBaseUrls } from 'lib/temple/front';
+import { useExplorerBaseUrls } from 'lib/temple/front';
+import { useBalance } from 'lib/temple/front/balance';
 
 interface PropertiesItemsProps {
   assetSlug: string;

src/app/pages/Collectibles/CollectiblesTab/CollectibleItem.tsx

@@ -13,7 +13,7 @@ import { useTokenMetadataSelector } from 'app/store/tokens-metadata/selectors';
 import { objktCurrencies } from 'lib/apis/objkt';
 import { T } from 'lib/i18n';
 import { getAssetName } from 'lib/metadata';
-import { useBalance } from 'lib/temple/front';
+import { useBalance } from 'lib/temple/front/balance';
 import { atomsToTokens } from 'lib/temple/helpers';
 import { useIntersectionDetection } from 'lib/ui/use-intersection-detection';
 import { Link } from 'lib/woozie';

src/app/store/balances/actions.ts

@@ -7,10 +7,19 @@ interface BalancesTzktPayloadSubmit {
 interface BalancesPayloadSuccess extends BalancesTzktPayloadSubmit {
   balances: Record<string, string>;
 }
+interface NativeTokenBalancePayloadSuccess extends BalancesTzktPayloadSubmit {
+  balance: string;
+}
 interface BalancesPayloadFail extends BalancesTzktPayloadSubmit {
   error: string;
 }
 
+export const loadNativeTokenBalanceFromTzktAction = createActions<
+  BalancesTzktPayloadSubmit,
+  NativeTokenBalancePayloadSuccess,
+  BalancesPayloadFail
+>('balances/LOAD_NATIVE_TOKEN_BALANCE');
+
 export const loadTokensBalancesFromTzktAction = createActions<
   BalancesTzktPayloadSubmit,
   BalancesPayloadSuccess,

src/app/store/balances/epics.ts

@@ -1,14 +1,14 @@
 import { BigNumber } from 'bignumber.js';
 import { combineEpics, Epic } from 'redux-observable';
-import { catchError, forkJoin, map, Observable, of, switchMap } from 'rxjs';
+import { catchError, forkJoin, from, map, Observable, of, switchMap } from 'rxjs';
 import { Action } from 'ts-action';
 import { ofType, toPayload } from 'ts-action-operators';
 
 import { fecthTezosBalanceFromTzkt, fetchAllTokensBalancesFromTzkt } from 'lib/apis/tzkt/api';
 import { TEZ_TOKEN_SLUG, toTokenSlug } from 'lib/assets';
 import { atomsToTokens } from 'lib/temple/helpers';
 
-import { loadTokensBalancesFromTzktAction } from './actions';
+import { loadNativeTokenBalanceFromTzktAction, loadTokensBalancesFromTzktAction } from './actions';
 
 const YUPANA_TOKENS = [
   'KT1Rk86CX85DjBKmuyBhrCyNsHyudHVtASec_0',
@@ -23,6 +23,18 @@ const YUPANA_MULTIPLIER = 18;
 const fetchTokensBalances$ = (account: string, chainId: string) =>
   forkJoin([fecthTezosBalanceFromTzkt(account, chainId), fetchAllTokensBalancesFromTzkt(account, chainId)]);
 
+const loadNativeTokenBalanceFromTzktEpic: Epic = (action$: Observable<Action>) =>
+  action$.pipe(
+    ofType(loadNativeTokenBalanceFromTzktAction.submit),
+    toPayload(),
+    switchMap(({ publicKeyHash, chainId }) =>
+      from(fecthTezosBalanceFromTzkt(publicKeyHash, chainId)).pipe(
+        map(({ balance }) => loadNativeTokenBalanceFromTzktAction.success({ publicKeyHash, chainId, balance })),
+        catchError(err => of(loadNativeTokenBalanceFromTzktAction.fail(err.message)))
+      )
+    )
+  );
+
 const loadTokensBalancesFromTzktEpic: Epic = (action$: Observable<Action>) =>
   action$.pipe(
     ofType(loadTokensBalancesFromTzktAction.submit),
@@ -51,4 +63,4 @@ const loadTokensBalancesFromTzktEpic: Epic = (action$: Observable<Action>) =>
     )
   );
 
-export const balancesEpics = combineEpics(loadTokensBalancesFromTzktEpic);
+export const balancesEpics = combineEpics(loadNativeTokenBalanceFromTzktEpic, loadTokensBalancesFromTzktEpic);

src/app/store/balances/reducers.ts

@@ -1,9 +1,10 @@
 import { createReducer } from '@reduxjs/toolkit';
 
+import { TEZ_TOKEN_SLUG } from 'lib/assets';
 import { getKeyForBalancesRecord } from 'lib/balances';
 import { createEntity } from 'lib/store/entity.utils';
 
-import { loadTokensBalancesFromTzktAction } from './actions';
+import { loadNativeTokenBalanceFromTzktAction, loadTokensBalancesFromTzktAction } from './actions';
 import { balancesInitialState } from './state';
 
 export const balancesReducer = createReducer(balancesInitialState, builder => {
@@ -24,4 +25,24 @@ export const balancesReducer = createReducer(balancesInitialState, builder => {
       [getKeyForBalancesRecord(payload.publicKeyHash, payload.chainId)]: createEntity({}, false, payload.error)
     };
   });
+
+  builder.addCase(loadNativeTokenBalanceFromTzktAction.submit, (state, { payload }) => {
+    const key = getKeyForBalancesRecord(payload.publicKeyHash, payload.chainId);
+
+    state.balancesAtomic[key] = createEntity(state.balancesAtomic[key]?.data ?? {}, true);
+  });
+  builder.addCase(loadNativeTokenBalanceFromTzktAction.success, (state, { payload }) => {
+    state.balancesAtomic = {
+      ...state.balancesAtomic,
+      [getKeyForBalancesRecord(payload.publicKeyHash, payload.chainId)]: createEntity(
+        { [TEZ_TOKEN_SLUG]: payload.balance },
+        false
+      )
+    };
+  });
+  builder.addCase(loadNativeTokenBalanceFromTzktAction.fail, (state, { payload }) => {
+    const key = getKeyForBalancesRecord(payload.publicKeyHash, payload.chainId);
+
+    state.balancesAtomic[key] = createEntity(state.balancesAtomic[key]?.data ?? {}, false, payload.error);
+  });
 });

src/app/store/balances/selectors.ts

@@ -4,7 +4,10 @@ import { useSelector } from '../root-state.selector';
 
 const EMPTY_BALANCES_RECORD = {};
 
+export const useAllBalancesSelector = () => useSelector(state => state.balances.balancesAtomic);
+
 export const useBalancesSelector = (publicKeyHash: string, chainId: string) => {
   const publicKeyHashWithChainId = getKeyForBalancesRecord(publicKeyHash, chainId);
+
   return useSelector(state => state.balances.balancesAtomic[publicKeyHashWithChainId]?.data ?? EMPTY_BALANCES_RECORD);
 };

src/app/store/index.ts

@@ -1,5 +1,6 @@
 import { devToolsEnhancer } from '@redux-devtools/remote';
 import { configureStore } from '@reduxjs/toolkit';
+import type { AnyAction, Dispatch } from 'redux';
 import { FLUSH, PAUSE, PERSIST, persistReducer, persistStore, PURGE, REGISTER, REHYDRATE } from 'redux-persist';
 import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
 import storage from 'redux-persist/lib/storage';
@@ -26,6 +27,13 @@ const persistedReducer = persistReducer<RootState>(
 
 const REDUX_DEVTOOLS_PORT = IS_DEV_ENV ? process.env.REDUX_DEVTOOLS_PORT : null;
 
+const actionsSubscriptions = new Set<SyncFn<AnyAction>>();
+export const subscribeToActions = (cb: SyncFn<AnyAction>) => {
+  actionsSubscriptions.add(cb);
+
+  return () => actionsSubscriptions.delete(cb);
+};
+
 const store = configureStore({
   reducer: persistedReducer,
   middleware: getDefaultMiddleware => {
@@ -35,7 +43,15 @@ const store = configureStore({
       }
     });
 
-    return defMiddleware.concat(epicMiddleware);
+    return defMiddleware.concat(epicMiddleware, () => (next: Dispatch<AnyAction>) => (action: AnyAction) => {
+      const returnValue = next(action);
+
+      for (const cb of actionsSubscriptions) {
+        cb(action);
+      }
+
+      return returnValue;
+    });
   },
   ...(REDUX_DEVTOOLS_PORT
     ? {

src/app/templates/Balance.tsx

@@ -4,7 +4,7 @@ import BigNumber from 'bignumber.js';
 import classNames from 'clsx';
 import CSSTransition from 'react-transition-group/CSSTransition';
 
-import { useBalance } from 'lib/temple/front';
+import { useBalance } from 'lib/temple/front/balance';
 
 type BalanceProps = {
   address: string;

src/app/templates/DelegateForm.tsx

@@ -19,7 +19,6 @@ import OperationStatus from 'app/templates/OperationStatus';
 import { useFormAnalytics } from 'lib/analytics';
 import { submitDelegation } from 'lib/apis/everstake';
 import { ABTestGroup } from 'lib/apis/temple';
-import { fetchTezosBalance } from 'lib/balances';
 import { BLOCK_DURATION } from 'lib/fixed-times';
 import { TID, T, t } from 'lib/i18n';
 import { HELP_UKRAINE_BAKER_ADDRESS, RECOMMENDED_BAKER_ADDRESS } from 'lib/known-bakers';
@@ -30,7 +29,6 @@ import {
   Baker,
   isDomainNameValid,
   useAccount,
-  useBalance,
   useGasToken,
   useKnownBaker,
   useKnownBakers,
@@ -39,6 +37,7 @@ import {
   useTezosDomainsClient,
   validateDelegate
 } from 'lib/temple/front';
+import { useBalance } from 'lib/temple/front/balance';
 import { useTezosAddressByDomainName } from 'lib/temple/front/tzdns';
 import { hasManager, isAddressValid, isKTAddress, mutezToTz, tzToMutez } from 'lib/temple/helpers';
 import { TempleAccountType } from 'lib/temple/types';
@@ -67,7 +66,7 @@ const DelegateForm: FC = () => {
 
   const accountPkh = acc.publicKeyHash;
 
-  const { data: balanceData, mutate: mutateBalance } = useBalance('tez', accountPkh);
+  const { data: balanceData, updateBalance } = useBalance('tez', accountPkh);
   const balance = balanceData!;
   const balanceNum = balance.toNumber();
   const domainsClient = useTezosDomainsClient();
@@ -133,7 +132,7 @@ const DelegateForm: FC = () => {
 
   const estimateBaseFee = useCallback(async () => {
     try {
-      const balanceBN = (await mutateBalance(fetchTezosBalance(tezos, accountPkh)))!;
+      const balanceBN = await updateBalance();
       if (balanceBN.isZero()) {
         throw new ZeroBalanceError();
       }
@@ -171,7 +170,7 @@ const DelegateForm: FC = () => {
           throw err;
       }
     }
-  }, [tezos, accountPkh, mutateBalance, getEstimation, acc]);
+  }, [tezos, accountPkh, updateBalance, getEstimation, acc]);
 
   const {
     data: baseFee,

src/app/templates/InternalConfirmation.tsx

@@ -24,7 +24,8 @@ import { ViewsSwitcherItemProps } from 'app/templates/ViewsSwitcher/ViewsSwitche
 import { toTokenSlug } from 'lib/assets';
 import { T, t } from 'lib/i18n';
 import { useRetryableSWR } from 'lib/swr';
-import { useCustomChainId, useNetwork, useRelevantAccounts, tryParseExpenses, useBalance } from 'lib/temple/front';
+import { useCustomChainId, useNetwork, useRelevantAccounts, tryParseExpenses } from 'lib/temple/front';
+import { useBalance } from 'lib/temple/front/balance';
 import { tzToMutez } from 'lib/temple/helpers';
 import { TempleAccountType, TempleChainId, TempleConfirmationPayload } from 'lib/temple/types';
 import { useSafeState } from 'lib/ui/hooks';

src/app/templates/SendForm/Form.tsx

@@ -29,7 +29,6 @@ import InFiat from 'app/templates/InFiat';
 import { useFormAnalytics } from 'lib/analytics';
 import { isTezAsset, toPenny } from 'lib/assets';
 import { toTransferParams } from 'lib/assets/contract.utils';
-import { fetchBalance, fetchTezosBalance } from 'lib/balances';
 import { useAssetFiatCurrencyPrice, useFiatCurrency } from 'lib/fiat-currency';
 import { BLOCK_DURATION } from 'lib/fixed-times';
 import { toLocalFixed, T, t } from 'lib/i18n';
@@ -41,13 +40,13 @@ import {
   ReactiveTezosToolkit,
   isDomainNameValid,
   useAccount,
-  useBalance,
   useNetwork,
   useTezos,
   useTezosDomainsClient,
   useFilteredContacts,
   validateRecipient
 } from 'lib/temple/front';
+import { useBalance } from 'lib/temple/front/balance';
 import { useTezosAddressByDomainName } from 'lib/temple/front/tzdns';
 import { hasManager, isAddressValid, isKTAddress, mutezToTz, tzToMutez } from 'lib/temple/helpers';
 import { TempleAccountType, TempleAccount, TempleNetworkType } from 'lib/temple/types';
@@ -95,10 +94,10 @@ export const Form: FC<FormProps> = ({ assetSlug, setOperation, onAddContactReque
   const canUseDomainNames = domainsClient.isSupported;
   const accountPkh = acc.publicKeyHash;
 
-  const { data: balanceData, mutate: mutateBalance } = useBalance(assetSlug, accountPkh);
+  const { data: balanceData, updateBalance } = useBalance(assetSlug, accountPkh);
   const balance = balanceData!;
 
-  const { data: tezBalanceData, mutate: mutateTezBalance } = useBalance('tez', accountPkh);
+  const { data: tezBalanceData, updateBalance: updateTezBalance } = useBalance('tez', accountPkh);
   const tezBalance = tezBalanceData!;
 
   const [shoudUseFiat, setShouldUseFiat] = useSafeState(false);
@@ -205,14 +204,14 @@ export const Form: FC<FormProps> = ({ assetSlug, setOperation, onAddContactReque
       const to = toResolved;
       const tez = isTezAsset(assetSlug);
 
-      const balanceBN = (await mutateBalance(fetchBalance(tezos, assetSlug, accountPkh, assetMetadata)))!;
+      const balanceBN = await updateBalance();
       if (balanceBN.isZero()) {
         throw new ZeroBalanceError();
       }
 
       let tezBalanceBN: BigNumber;
       if (!tez) {
-        tezBalanceBN = (await mutateTezBalance(fetchTezosBalance(tezos, accountPkh)))!;
+        tezBalanceBN = await updateTezBalance();
         if (tezBalanceBN.isZero()) {
           throw new ZeroTEZBalanceError();
         }
@@ -245,7 +244,7 @@ export const Form: FC<FormProps> = ({ assetSlug, setOperation, onAddContactReque
       console.error(err);
       throw err;
     }
-  }, [acc, tezos, assetSlug, assetMetadata, accountPkh, toResolved, mutateBalance, mutateTezBalance]);
+  }, [acc, tezos, assetSlug, assetMetadata, accountPkh, toResolved, updateBalance, updateTezBalance]);
 
   const {
     data: baseFee,

src/app/templates/SwapForm/SwapFormInput/SwapFormInput.tsx

@@ -16,7 +16,8 @@ import { useFilteredAssetsSlugs } from 'lib/assets/use-filtered';
 import { T, t, toLocalFormat } from 'lib/i18n';
 import { EMPTY_BASE_METADATA, useAssetMetadata, AssetMetadataBase } from 'lib/metadata';
 import { useAvailableRoute3TokensSlugs } from 'lib/route3/assets';
-import { useAccount, useBalance, useGetTokenMetadata, useOnBlock } from 'lib/temple/front';
+import { useAccount, useGetTokenMetadata, useOnBlock } from 'lib/temple/front';
+import { useBalance } from 'lib/temple/front/balance';
 
 import { AssetOption } from './AssetsMenu/AssetOption';
 import { PercentageButton } from './PercentageButton/PercentageButton';

src/lib/apis/tzkt/api.ts

@@ -179,11 +179,11 @@ const fecthTokensBalancesFromTzktOnce = async (account: string, chainId: string,
       })
     : [];
 
-export const fetchAllTokensBalancesFromTzkt = async (selectedRpcUrl: string, account: string) => {
+export const fetchAllTokensBalancesFromTzkt = async (account: string, chainId: string) => {
   const balances: TzktAccountToken[] = [];
 
   await (async function recourse(offset: number) {
-    const data = await fecthTokensBalancesFromTzktOnce(selectedRpcUrl, account, LIMIT, offset);
+    const data = await fecthTokensBalancesFromTzktOnce(account, chainId, LIMIT, offset);
 
     balances.push(...data);
 

src/lib/balances/fetch.ts

@@ -3,7 +3,7 @@ import BigNumber from 'bignumber.js';
 
 import { isFA2Token, TEZ_TOKEN_SLUG } from 'lib/assets';
 import { fromAssetSlug } from 'lib/assets/contract.utils';
-import { TEZOS_METADATA, AssetMetadataBase } from 'lib/metadata';
+import { AssetMetadataBase } from 'lib/metadata';
 import { loadContract } from 'lib/temple/contract';
 import { atomsToTokens } from 'lib/temple/helpers';
 
@@ -14,12 +14,6 @@ const fetchTezosBalanceAtomic = async (tezos: TezosToolkit, account: string) =>
   return nat;
 };
 
-export const fetchTezosBalance = async (tezos: TezosToolkit, account: string) => {
-  const nat = await fetchTezosBalanceAtomic(tezos, account);
-
-  return atomsToTokens(nat, TEZOS_METADATA.decimals);
-};
-
 export const fetchBalance = async (
   tezos: TezosToolkit,
   assetSlug: string,

src/lib/balances/index.ts

@@ -1,3 +1,3 @@
-export { fetchBalance, fetchTezosBalance } from './fetch';
+export { fetchBalance } from './fetch';
 export { useAccountBalances } from './hooks';
 export { getBalanceSWRKey, getKeyForBalancesRecord } from './utils';