TW-683: Assets rework. Tokens. + Whitelist

TODO.md

@@ -1,7 +1,9 @@
 - Migrate IndexDB tokens into Redux
 - `token.metadata.null`
 - No-cycle lint rule
-- `export { dispatch } from 'app/store';`
+- `export { useSelector, dispatch } from 'app/store';`
 - Whitelisted tokens to Redux store
 - Minimize persisted data
+- Refactor `lib/assets/hooks`
+- `useSlugsOf`
 -

src/app/hooks/use-assets-loading.ts

@@ -2,8 +2,9 @@ import { useEffect } from 'react';
 
 import { useDispatch } from 'react-redux';
 
-import { loadAccountTokensActions } from 'app/store/assets/actions';
+import { loadAccountTokensActions, loadTokensWhitelistActions } from 'app/store/assets/actions';
 import { useAccount, useChainId } from 'lib/temple/front';
+import { TempleChainId } from 'lib/temple/types';
 
 export const useAssetsLoading = () => {
   const chainId = useChainId()!;
@@ -14,4 +15,8 @@ export const useAssetsLoading = () => {
   useEffect(() => {
     dispatch(loadAccountTokensActions.submit({ account: publicKeyHash, chainId }));
   }, [chainId, publicKeyHash]);
+
+  useEffect(() => {
+    if (chainId === TempleChainId.Mainnet) dispatch(loadTokensWhitelistActions.submit());
+  }, [chainId]);
 };

src/app/hooks/use-metadata-loading.ts

@@ -4,15 +4,10 @@ import { isEqual } from 'lodash';
 import { useDispatch } from 'react-redux';
 
 import { useAccountTokensSelector } from 'app/store/assets/selectors';
-import {
-  loadTokensMetadataAction,
-  loadWhitelistAction,
-  resetTokensMetadataLoadingAction
-} from 'app/store/tokens-metadata/actions';
+import { loadTokensMetadataAction, resetTokensMetadataLoadingAction } from 'app/store/tokens-metadata/actions';
 import { useTokensMetadataSelector } from 'app/store/tokens-metadata/selectors';
 import { METADATA_SYNC_INTERVAL } from 'lib/fixed-times';
 import { useAccount, useChainId, useTezos, useCollectibleTokens } from 'lib/temple/front';
-import { TempleChainId } from 'lib/temple/types';
 import { useInterval, useMemoWithCompare } from 'lib/ui/hooks';
 
 export const useMetadataLoading = () => {
@@ -43,10 +38,6 @@ export const useMetadataLoading = () => {
     isEqual
   );
 
-  useEffect(() => {
-    if (chainId === TempleChainId.Mainnet) dispatch(loadWhitelistAction.submit());
-  }, [chainId]);
-
   useEffect(() => {
     dispatch(resetTokensMetadataLoadingAction());
 

src/app/pages/AddAsset/AddAsset.tsx

@@ -10,7 +10,7 @@ import { Alert, FormField, FormSubmitButton, NoSpaceField } from 'app/atoms';
 import Spinner from 'app/atoms/Spinner/Spinner';
 import { ReactComponent as AddIcon } from 'app/icons/add.svg';
 import PageLayout from 'app/layouts/PageLayout';
-import { addTokensMetadataAction } from 'app/store/tokens-metadata/actions';
+import { putTokensMetadataAction } from 'app/store/tokens-metadata/actions';
 import { useFormAnalytics } from 'lib/analytics';
 import { TokenMetadataResponse } from 'lib/apis/temple';
 import { toTokenSlug } from 'lib/assets';
@@ -215,7 +215,7 @@ const Form: FC = () => {
           id: tokenId
         };
 
-        dispatch(addTokensMetadataAction([tokenMetadata]));
+        dispatch(putTokensMetadataAction([tokenMetadata]));
 
         await Repo.accountTokens.put(
           {

src/app/pages/Home/OtherComponents/Tokens/Tokens.tsx

@@ -17,10 +17,11 @@ import { useIsEnabledAdsBannerSelector } from 'app/store/settings/selectors';
 import { ButtonForManageDropdown } from 'app/templates/ManageDropdown';
 import SearchAssetField from 'app/templates/SearchAssetField';
 import { OptimalPromoVariantEnum } from 'lib/apis/optimal';
-import { TEMPLE_TOKEN_SLUG, TEZ_TOKEN_SLUG, useDisplayedAccountTokens } from 'lib/assets';
+import { TEZ_TOKEN_SLUG, TEMPLE_TOKEN_SLUG } from 'lib/assets';
+import { useEnabledAccountTokens } from 'lib/assets/hooks';
 import { useFilteredAssetsSlugs } from 'lib/assets/use-filtered';
 import { T, t } from 'lib/i18n';
-import { useAccount, useChainId } from 'lib/temple/front';
+import { useAccount } from 'lib/temple/front';
 import { useSyncTokens } from 'lib/temple/front/sync-tokens';
 import { useMemoWithCompare } from 'lib/ui/hooks';
 import { useLocalStorage } from 'lib/ui/local-storage';
@@ -45,7 +46,7 @@ export const TokensTab: FC = () => {
   const { isSyncing } = useSyncTokens();
   const { popup } = useAppEnv();
 
-  const tokens = useDisplayedAccountTokens();
+  const tokens = useEnabledAccountTokens();
 
   const [isZeroBalancesHidden, setIsZeroBalancesHidden] = useLocalStorage(LOCAL_STORAGE_TOGGLE_KEY, false);
 
@@ -54,7 +55,7 @@ export const TokensTab: FC = () => {
     [setIsZeroBalancesHidden]
   );
 
-  const slugs = useMemoWithCompare(() => tokens.map(({ slug }) => slug).sort(), [tokens], isEqual);
+  const slugs = useMemoWithCompare(() => tokens.map(({ slug }) => slug), [tokens], isEqual);
 
   const { filteredAssets, searchValue, setSearchValue } = useFilteredAssetsSlugs(
     slugs,

src/app/pages/ManageAssets/ManageTokens.tsx

@@ -1,4 +1,4 @@
-import React, { FC, memo, useCallback } from 'react';
+import React, { FC, memo, useCallback, useMemo } from 'react';
 
 import classNames from 'clsx';
 import { useDispatch } from 'react-redux';
@@ -8,13 +8,14 @@ import { ReactComponent as AddIcon } from 'app/icons/add-to-list.svg';
 import { ReactComponent as CloseIcon } from 'app/icons/close.svg';
 import { ReactComponent as SearchIcon } from 'app/icons/search.svg';
 import { ManageAssetsSelectors } from 'app/pages/ManageAssets/ManageAssets.selectors';
-import { setTokenStatusToRemovedAction, toggleTokenStatusAction } from 'app/store/assets/actions';
+import { setTokenStatusAction } from 'app/store/assets/actions';
 import { useAccountTokensAreLoadingSelector } from 'app/store/assets/selectors';
 import { useTokensMetadataLoadingSelector } from 'app/store/tokens-metadata/selectors';
 import { AssetIcon } from 'app/templates/AssetIcon';
 import SearchAssetField from 'app/templates/SearchAssetField';
 import { setAnotherSelector, setTestID } from 'lib/analytics';
-import { TEMPLE_TOKEN_SLUG, useAccountTokens } from 'lib/assets';
+import { TEMPLE_TOKEN_SLUG } from 'lib/assets';
+import { useAccountTokens } from 'lib/assets/hooks';
 import { useFilteredAssetsSlugs } from 'lib/assets/use-filtered';
 import { T, t } from 'lib/i18n';
 import { useAssetMetadata, getAssetName, getAssetSymbol } from 'lib/metadata';
@@ -32,9 +33,9 @@ export const ManageTokensContent: FC = memo(() => {
 
   const tokens = useAccountTokens(publicKeyHash, chainId);
 
-  const managebleTokens = tokens.reduce<string[]>(
-    (acc, { slug, status }) => (slug === TEMPLE_TOKEN_SLUG || status === 'removed' ? acc : acc.concat(slug)),
-    []
+  const managebleTokens = useMemo(
+    () => tokens.reduce<string[]>((acc, { slug }) => (slug === TEMPLE_TOKEN_SLUG ? acc : acc.concat(slug)), []),
+    [tokens]
   );
 
   const tokensAreLoading = useAccountTokensAreLoadingSelector();
@@ -56,8 +57,7 @@ export const ManageTokensContent: FC = memo(() => {
           title: t('deleteTokenConfirm')
         });
 
-        if (confirmed) return;
-        dispatch(setTokenStatusToRemovedAction({ account: publicKeyHash, chainId, slug }));
+        if (confirmed) dispatch(setTokenStatusAction({ account: publicKeyHash, chainId, slug, status: 'removed' }));
       } catch (err: any) {
         console.error(err);
         alert(err.message);
@@ -67,14 +67,10 @@ export const ManageTokensContent: FC = memo(() => {
   );
 
   const toggleTokenStatus = useCallback(
-    async (slug: string) => {
-      try {
-        dispatch(toggleTokenStatusAction({ account: publicKeyHash, chainId, slug }));
-      } catch (err: any) {
-        console.error(err);
-        alert(err.message);
-      }
-    },
+    (slug: string, toDisable: boolean) =>
+      void dispatch(
+        setTokenStatusAction({ account: publicKeyHash, chainId, slug, status: toDisable ? 'disabled' : 'enabled' })
+      ),
     [chainId, publicKeyHash]
   );
 
@@ -106,14 +102,13 @@ export const ManageTokensContent: FC = memo(() => {
           {managableSlugs.map((slug, i, arr) => {
             const last = i === arr.length - 1;
             const status = tokens.find(t => t.slug === slug)!.status;
-            const checked = !status || status === 'enabled';
 
             return (
               <ListItem
                 key={slug}
                 assetSlug={slug}
                 last={last}
-                checked={checked}
+                checked={status === 'enabled'}
                 onRemove={removeToken}
                 onToggle={toggleTokenStatus}
               />
@@ -131,16 +126,14 @@ type ListItemProps = {
   assetSlug: string;
   last: boolean;
   checked: boolean;
-  onToggle: (slug: string) => void;
+  onToggle: (slug: string, toDisable: boolean) => void;
   onRemove: (slug: string) => void;
 };
 
 const ListItem = memo<ListItemProps>(({ assetSlug, last, checked, onToggle, onRemove }) => {
   const metadata = useAssetMetadata(assetSlug);
 
-  const onCheckboxChange = useCallback(() => {
-    onToggle(assetSlug);
-  }, [assetSlug, onToggle]);
+  const onCheckboxChange = useCallback((checked: boolean) => void onToggle(assetSlug, !checked), [assetSlug, onToggle]);
 
   const onRemoveBtnClick = useCallback<React.MouseEventHandler<HTMLDivElement>>(
     event => {

src/app/pages/Withdraw/Debit/AliceBob/steps/SellStep.tsx

@@ -8,7 +8,7 @@ import { ReactComponent as CopyIcon } from 'app/icons/copy.svg';
 import { WithdrawSelectors } from 'app/pages/Withdraw/Withdraw.selectors';
 import { AnalyticsEventCategory, setTestID, useAnalytics, useFormAnalytics } from 'lib/analytics';
 import { AliceBobOrderStatus, cancelAliceBobOrder } from 'lib/apis/temple';
-import { toTransferParams } from 'lib/assets/utils';
+import { toTransferParams } from 'lib/assets/contract.utils';
 import { T, TID } from 'lib/i18n';
 import { TEZOS_METADATA } from 'lib/metadata/defaults';
 import { useAccount, useTezos } from 'lib/temple/front';

src/app/store/assets/actions.ts

@@ -1,17 +1,30 @@
 import { createAction } from '@reduxjs/toolkit';
 
+import { WhitelistResponseToken } from 'lib/apis/temple';
 import { createActions } from 'lib/store';
 
-import { StorredToken } from './state';
+import { StoredAssetStatus, StoredToken } from './state';
+
+interface LoadTokensPayload {
+  /** PKH */
+  account: string;
+  chainId: string;
+}
 
 export const loadAccountTokensActions = createActions<
-  { account: string; chainId: string },
-  { account: string; chainId: string; slugs: string[] },
+  LoadTokensPayload,
+  LoadTokensPayload & { slugs: string[] },
   { code?: number }
 >('assets/LOAD_ACCOUNT_TOKENS');
 
-type TokenStatusAlterPayload = Pick<StorredToken, 'account' | 'chainId' | 'slug'>;
+type LoadWhitelistPayload = WhitelistResponseToken[];
+
+export const loadTokensWhitelistActions = createActions<void, LoadWhitelistPayload, { code?: number }>(
+  'assets/LOAD_TOKENS_WHITELIST'
+);
 
-export const setTokenStatusToRemovedAction = createAction<TokenStatusAlterPayload>('assets/SET_TOKEN_REMOVED');
+interface SetTokenStatusPayload extends Pick<StoredToken, 'account' | 'chainId' | 'slug'> {
+  status: StoredAssetStatus;
+}
 
-export const toggleTokenStatusAction = createAction<TokenStatusAlterPayload>('assets/TOGGLE_TOKEN_STATUS');
+export const setTokenStatusAction = createAction<SetTokenStatusPayload>('assets/SET_TOKEN_STATUS');

src/app/store/assets/epics.ts

@@ -4,25 +4,33 @@ import { catchError, map, switchMap } from 'rxjs/operators';
 import { Action } from 'ts-action';
 import { ofType, toPayload } from 'ts-action-operators';
 
-import { loadAccountTokensActions } from './actions';
+import { fetchWhitelistTokens$ } from 'lib/apis/temple';
+
+import { loadAccountTokensActions, loadTokensWhitelistActions } from './actions';
 import { fetchAccountTokens } from './utils';
 
-const loadAccountTokensEpic: Epic = (action$: Observable<Action>) =>
+const loadAccountTokensEpic: Epic<Action> = action$ =>
   action$.pipe(
     ofType(loadAccountTokensActions.submit),
     toPayload(),
     switchMap(({ account, chainId }) =>
       from(fetchAccountTokens(account, chainId)).pipe(
-        map(tokens =>
-          loadAccountTokensActions.success({
-            account,
-            chainId,
-            slugs: tokens.map(t => t.slug)
-          })
-        ),
+        map(tokens => tokens.map(t => t.slug)),
+        map(slugs => loadAccountTokensActions.success({ account, chainId, slugs })),
         catchError(err => of(loadAccountTokensActions.fail({ code: 404 })))
       )
     )
   );
 
-export const assetsEpics = combineEpics(loadAccountTokensEpic);
+const loadTokensWhitelistEpic: Epic<Action> = action$ =>
+  action$.pipe(
+    ofType(loadTokensWhitelistActions.submit),
+    switchMap(() =>
+      fetchWhitelistTokens$().pipe(
+        map(loadTokensWhitelistActions.success),
+        catchError(err => of(loadTokensWhitelistActions.fail({ code: 404 })))
+      )
+    )
+  );
+
+export const assetsEpics = combineEpics(loadAccountTokensEpic, loadTokensWhitelistEpic);

src/app/store/assets/reducer.ts

@@ -1,6 +1,8 @@
 import { createReducer } from '@reduxjs/toolkit';
 
-import { loadAccountTokensActions, setTokenStatusToRemovedAction, toggleTokenStatusAction } from './actions';
+import { toTokenSlug } from 'lib/assets';
+
+import { loadAccountTokensActions, loadTokensWhitelistActions, setTokenStatusAction } from './actions';
 import { initialState, SliceState } from './state';
 
 export const assetsReducer = createReducer<SliceState>(initialState, builder => {
@@ -31,21 +33,30 @@ export const assetsReducer = createReducer<SliceState>(initialState, builder =>
     }
   });
 
-  builder.addCase(setTokenStatusToRemovedAction, (state, { payload: { account, chainId, slug } }) => {
-    const tokens = state.tokens.data;
-    const index = tokens.findIndex(t => t.account === account && t.chainId === chainId && t.slug === slug);
-    const token = tokens[index] ?? { account, chainId, slug };
+  builder.addCase(loadTokensWhitelistActions.submit, state => {
+    state.mainnetWhitelist.isLoading = true;
+  });
 
-    token.status = 'removed';
-    tokens[index === -1 ? tokens.length : index] = token;
+  builder.addCase(loadTokensWhitelistActions.fail, state => {
+    state.mainnetWhitelist.isLoading = false;
+  });
+
+  builder.addCase(loadTokensWhitelistActions.success, (state, { payload }) => {
+    state.mainnetWhitelist.isLoading = false;
+    delete state.mainnetWhitelist.error;
+
+    for (const token of payload) {
+      const slug = toTokenSlug(token.contractAddress, token.fa2TokenId);
+      if (!state.mainnetWhitelist.data.includes(slug)) state.mainnetWhitelist.data.push(slug);
+    }
   });
 
-  builder.addCase(toggleTokenStatusAction, (state, { payload: { account, chainId, slug } }) => {
+  builder.addCase(setTokenStatusAction, (state, { payload: { account, chainId, slug, status } }) => {
     const tokens = state.tokens.data;
     const index = tokens.findIndex(t => t.account === account && t.chainId === chainId && t.slug === slug);
     const token = tokens[index] ?? { account, chainId, slug };
 
-    token.status = token.status === 'disabled' ? 'enabled' : 'disabled';
+    token.status = status;
     tokens[index === -1 ? tokens.length : index] = token;
   });
 });

src/app/store/assets/selectors.ts

@@ -2,7 +2,7 @@ import { isEqual } from 'lodash';
 
 import { useMemoWithCompare } from 'lib/ui/hooks';
 
-import { useSelector } from '../index';
+import { useSelector } from '../root-state.selector';
 
 export const useAccountTokensAreLoadingSelector = () => useSelector(state => state.assets.tokens.isLoading);
 
@@ -15,3 +15,5 @@ export const useAccountTokensSelector = (account: string, chainId: string) => {
     isEqual
   );
 };
+
+export const useMainnetTokensWhitelistSelector = () => useSelector(state => state.assets.mainnetWhitelist);

src/app/store/assets/state.mock.ts

@@ -3,5 +3,6 @@ import { createEntity } from 'lib/store';
 import { SliceState } from './state';
 
 export const mockAssetsState: SliceState = {
-  tokens: createEntity([])
+  tokens: createEntity([]),
+  mainnetWhitelist: createEntity([])
 };