feat: update arc200 asset information when updating the accounts

src/extension/apps/main/Root.tsx

@@ -14,7 +14,7 @@ import SignTxnsModal from '@extension/components/SignTxnsModal';
 import WalletConnectModal from '@extension/components/WalletConnectModal';
 
 // features
-import { setAccountId } from '@extension/features/add-asset';
+import { reset as resetAddAsset } from '@extension/features/add-asset';
 import {
   fetchAccountsFromStorageThunk,
   startPollingForAccountsThunk,
@@ -61,7 +61,7 @@ const Root: FC = () => {
   const accounts: IAccount[] = useSelectAccounts();
   const selectedNetwork: INetwork | null = useSelectSelectedNetwork();
   // handlers
-  const handleAddAssetClose = () => dispatch(setAccountId(null));
+  const handleAddAssetClose = () => dispatch(resetAddAsset());
   const handleConfirmClose = () => dispatch(setConfirm(null));
   const handleEnableModalClose = () => dispatch(setEnableRequest(null));
   const handleErrorModalClose = () => dispatch(setError(null));

src/extension/components/AddAssetModal/AddAssetModal.tsx

@@ -132,8 +132,7 @@ const AddAssetModal: FC<IProps> = ({ onClose }: IProps) => {
         );
       }
 
-      // reset the modal to close it
-      dispatch(reset());
+      handleClose();
     } catch (error) {
       dispatch(
         createNotification({
@@ -147,11 +146,16 @@ const AddAssetModal: FC<IProps> = ({ onClose }: IProps) => {
       );
     }
   };
-  const handleCancelClick = () => onClose();
+  const handleCancelClick = () => handleClose();
   const handleClearQuery = () => {
     setQuery('');
     dispatch(clearAssets());
   };
+  const handleClose = () => {
+    setQuery('');
+    setQueryByIdDispatch(null);
+    onClose();
+  };
   const handleKeyUp = () => {
     // if we have only numbers, we have an asset/app id
     if (new RegExp(/^\d+$/).test(query)) {

src/extension/components/AssetsTab/AssetsTab.tsx

@@ -1,4 +1,11 @@
-import { HStack, Spacer, TabPanel, VStack } from '@chakra-ui/react';
+import {
+  HStack,
+  Spacer,
+  Spinner,
+  TabPanel,
+  Tooltip,
+  VStack,
+} from '@chakra-ui/react';
 import React, { FC, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IoAdd } from 'react-icons/io5';
@@ -19,13 +26,16 @@ import { setAccountId as setAddAssetAccountId } from '@extension/features/add-as
 
 // hooks
 import useAccountInformation from '@extension/hooks/useAccountInformation';
+import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
 
 // selectors
 import {
   useSelectArc200AssetsBySelectedNetwork,
+  useSelectFetchingArc200Assets,
   useSelectFetchingStandardAssets,
   useSelectStandardAssetsBySelectedNetwork,
   useSelectSelectedNetwork,
+  useSelectUpdatingArc200Assets,
   useSelectUpdatingStandardAssets,
 } from '@extension/selectors';
 
@@ -53,12 +63,15 @@ const AssetsTab: FC<IProps> = ({ account }: IProps) => {
   const dispatch: IAppThunkDispatch = useDispatch<IAppThunkDispatch>();
   // selectors
   const arc200Assets: IArc200Asset[] = useSelectArc200AssetsBySelectedNetwork();
-  const fetching: boolean = useSelectFetchingStandardAssets();
+  const fetchingArc200Assets: boolean = useSelectFetchingArc200Assets();
+  const fetchingStandardAssets: boolean = useSelectFetchingStandardAssets();
   const selectedNetwork: INetwork | null = useSelectSelectedNetwork();
   const standardAssets: IStandardAsset[] =
     useSelectStandardAssetsBySelectedNetwork();
-  const updating: boolean = useSelectUpdatingStandardAssets();
+  const updatingArc200Assets: boolean = useSelectUpdatingArc200Assets();
+  const updatingStandardAssets: boolean = useSelectUpdatingStandardAssets();
   // hooks
+  const defaultTextColor: string = useDefaultTextColor();
   const accountInformation: IAccountInformation | null = useAccountInformation(
     account.id
   );
@@ -83,7 +96,7 @@ const AssetsTab: FC<IProps> = ({ account }: IProps) => {
   const renderContent = () => {
     let assetNodes: ReactNode[] = [];
 
-    if (fetching || updating) {
+    if (fetchingArc200Assets || fetchingStandardAssets) {
       return Array.from({ length: 3 }, (_, index) => (
         <AssetTabLoadingItem key={`asset-tab-loading-item-${index}`} />
       ));
@@ -143,12 +156,31 @@ const AssetsTab: FC<IProps> = ({ account }: IProps) => {
         {/*controls*/}
         <HStack
           alignItems="center"
-          justifyContent="flex-end"
+          justifyContent="flex-start"
           px={DEFAULT_GAP / 2}
           py={DEFAULT_GAP / 3}
           spacing={1}
           w="full"
         >
+          {/*updating asset spinner*/}
+          {updatingArc200Assets ||
+            (updatingStandardAssets && (
+              <Tooltip
+                aria-label="Updating asset information spinner"
+                label={t<string>('captions.updatingAssetInformation')}
+              >
+                <Spinner
+                  thickness="1px"
+                  speed="0.65s"
+                  color={defaultTextColor}
+                  size="sm"
+                />
+              </Tooltip>
+            ))}
+
+          <Spacer />
+
+          {/*add asset*/}
           <Button
             leftIcon={<IoAdd />}
             onClick={handleAddAssetClick}

src/extension/selectors/index.ts

@@ -14,6 +14,7 @@ export { default as useSelectConfirm } from './useSelectConfirm';
 export { default as useSelectEnableRequest } from './useSelectEnableRequest';
 export { default as useSelectError } from './useSelectError';
 export { default as useSelectFetchingAccounts } from './useSelectFetchingAccounts';
+export { default as useSelectFetchingArc200Assets } from './useSelectFetchingArc200Assets';
 export { default as useSelectFetchingSessions } from './useSelectFetchingSessions';
 export { default as useSelectFetchingSettings } from './useSelectFetchingSettings';
 export { default as useSelectFetchingStandardAssets } from './useSelectFetchingStandardAssets';
@@ -44,6 +45,7 @@ export { default as useSelectSignBytesRequest } from './useSelectSignBytesReques
 export { default as useSelectSignTxnsRequest } from './useSelectSignTxnsRequest';
 export { default as useSelectStandardAssetsByGenesisHash } from './useSelectStandardAssetsByGenesisHash';
 export { default as useSelectStandardAssetsBySelectedNetwork } from './useSelectStandardAssetsBySelectedNetwork';
+export { default as useSelectUpdatingArc200Assets } from './useSelectUpdatingArc200Assets';
 export { default as useSelectUpdatingStandardAssets } from './useSelectUpdatingStandardAssets';
 export { default as useSelectWalletConnectModalOpen } from './useSelectWalletConnectModalOpen';
 export { default as useSelectWeb3Wallet } from './useSelectWeb3Wallet';

src/extension/selectors/useSelectFetchingArc200Assets.ts

@@ -0,0 +1,9 @@
+import { useSelector } from 'react-redux';
+
+// types
+import { IMainRootState } from '@extension/types';
+export default function useSelectFetchingArc200Assets(): boolean {
+  return useSelector<IMainRootState, boolean>(
+    (state) => state.arc200Assets.fetching
+  );
+}

src/extension/selectors/useSelectUpdatingArc200Assets.ts

@@ -0,0 +1,10 @@
+import { useSelector } from 'react-redux';
+
+// types
+import { IMainRootState } from '@extension/types';
+
+export default function useSelectUpdatingArc200Assets(): boolean {
+  return useSelector<IMainRootState, boolean>(
+    (state) => state.arc200Assets.updating
+  );
+}

src/extension/translations/en.ts

@@ -138,6 +138,7 @@ const translation: IResourceLanguage = {
     transactionIdCopied: 'Transaction ID copied!',
     transactionSendSuccessful:
       'Transaction "{{transactionId}}" was successfully sent.',
+    updatingAssetInformation: 'Updating asset information',
   },
   errors: {
     descriptions: {