TW-1544 Prevent disabling main Tezos and EVM networks

package.json

@@ -225,6 +225,7 @@
     "react-dev-utils/fork-ts-checker-webpack-plugin": "^9",
     "tslib": "^2.4.0",
     "@types/react": "18.0.15",
+    "@types/react-dev-utils/@types/webpack-dev-server": "^4",
     "@taquito/taquito": "20.0.0",
     "@taquito/utils": "20.0.0",
     "@taquito/beacon-wallet": "20.0.0",

src/app/hooks/listing-logic/use-account-tokens-listing-logic.ts

@@ -77,7 +77,7 @@ export const useAccountTokensForListing = (
       : enabledChainsSlugs;
 
     return enabledChainsSlugsFiltered.sort(tokensSortPredicate);
-  }, [tezTokens, evmTokens, isNonZeroBalance, tokensSortPredicate, gasChainsSlugs, filterZeroBalances]);
+  }, [gasChainsSlugs, tezTokens, evmTokens, filterZeroBalances, isNonZeroBalance, tokensSortPredicate]);
 
   return {
     enabledChainsSlugsSorted,

src/app/pages/ChainSettings/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { memo, useCallback, useEffect, useState } from 'react';
 
 import { ToggleSwitch } from 'app/atoms';
 import { ActionModalBodyContainer, ActionModalButton, ActionModalButtonsContainer } from 'app/atoms/action-modal';
@@ -7,18 +7,12 @@ import { SettingsCell } from 'app/atoms/SettingsCell';
 import { SettingsCellGroup } from 'app/atoms/SettingsCellGroup';
 import { StyledButton } from 'app/atoms/StyledButton';
 import PageLayout from 'app/layouts/PageLayout';
+import { MAIN_CHAINS_IDS } from 'lib/constants';
 import { T, t } from 'lib/i18n';
 import { useBooleanState } from 'lib/ui/hooks';
 import { HistoryAction, navigate } from 'lib/woozie';
-import {
-  OneOfChains,
-  useAllEvmChains,
-  useAllTezosChains,
-  useEnabledEvmChains,
-  useEnabledTezosChains
-} from 'temple/front';
+import { OneOfChains, useAllEvmChains, useAllTezosChains } from 'temple/front';
 import { BlockExplorer } from 'temple/front/block-explorers';
-import { isPossibleTestnetChain } from 'temple/front/chains';
 import { StoredEvmNetwork, StoredTezosNetwork } from 'temple/networks';
 import { TempleChainKind } from 'temple/types';
 
@@ -42,8 +36,6 @@ const explorerUrlFn = (item: { url: string }) => item.url;
 
 const ChainExistentSettings = memo<ChainExistentSettingsProps>(({ chain, bottomEdgeIsVisible }) => {
   const [removeChainModalIsOpen, openRemoveChainModal, closeRemoveChainModal] = useBooleanState(false);
-  const enabledEvmChains = useEnabledEvmChains();
-  const enabledTezChains = useEnabledTezosChains();
   const { kind: chainKind, chainId } = chain;
   const {
     setChainEnabled,
@@ -55,17 +47,7 @@ const ChainExistentSettings = memo<ChainExistentSettingsProps>(({ chain, bottomE
     removeBlockExplorer,
     removeChain
   } = useChainOperations(chainKind, chainId);
-  const allEnabledChains = useMemo(
-    () => (enabledEvmChains as OneOfChains[]).concat(enabledTezChains),
-    [enabledEvmChains, enabledTezChains]
-  );
-  const enabledMainnetChains = useMemo(
-    () => allEnabledChains.filter(chain => !isPossibleTestnetChain(chain)),
-    [allEnabledChains]
-  );
-  const enabledTestnetChains = useMemo(() => allEnabledChains.filter(isPossibleTestnetChain), [allEnabledChains]);
-  const shouldPreventDisablingChain =
-    (isPossibleTestnetChain(chain) ? enabledTestnetChains : enabledMainnetChains).length === 1;
+  const shouldPreventDisablingChain = MAIN_CHAINS_IDS.includes(chainId);
 
   const handleConfirmRemoveClick = useCallback(() => {
     closeRemoveChainModal();

src/app/templates/AddressBook/AddressBook.tsx

@@ -97,7 +97,7 @@ const SUBMIT_ERROR_TYPE = 'submit-error';
 const AddNewContactForm: React.FC<{ className?: string }> = ({ className }) => {
   const { addContact } = useContactsActions();
 
-  const chainSelectController = useChainSelectController();
+  const chainSelectController = useChainSelectController(false);
   const network = chainSelectController.value;
 
   const {
@@ -171,7 +171,11 @@ const AddNewContactForm: React.FC<{ className?: string }> = ({ className }) => {
 
   return (
     <form className={className} onSubmit={handleSubmit(onAddContactSubmit)}>
-      <ChainSelectSection controller={chainSelectController} onlyForAddressResolution />
+      <ChainSelectSection
+        controller={chainSelectController}
+        onlyForAddressResolution
+        shouldFilterByCurrentAccount={false}
+      />
 
       <FormField
         ref={register({ validate: validateAddressField })}

src/app/templates/ChainSelect/ChainsDropdown.tsx

@@ -7,7 +7,14 @@ import { useShortcutAccountSelectModalIsOpened } from 'app/hooks/use-account-sel
 import { ReactComponent as SignalAltIcon } from 'app/icons/monochrome/signal-alt.svg';
 import { T } from 'lib/i18n';
 import { PopperRenderProps } from 'lib/ui/Popper';
-import { TezosChain, EvmChain, useEnabledTezosChains, useEnabledEvmChains } from 'temple/front';
+import {
+  TezosChain,
+  EvmChain,
+  useEnabledTezosChains,
+  useEnabledEvmChains,
+  useAccountAddressForTezos,
+  useAccountAddressForEvm
+} from 'temple/front';
 import { TempleChainTitle } from 'temple/types';
 
 import { ChainButton } from './ChainButton';
@@ -16,13 +23,16 @@ import styles from './style.module.css';
 
 interface Props extends PopperRenderProps {
   controller: ChainSelectController;
+  shouldFilterByCurrentAccount: boolean;
 }
 
-export const ChainsDropdown = memo<Props>(({ opened, setOpened, controller }) => {
+export const ChainsDropdown = memo<Props>(({ opened, setOpened, controller, shouldFilterByCurrentAccount }) => {
   const selectedChain = controller.value;
 
   const tezosChains = useEnabledTezosChains();
   const evmChains = useEnabledEvmChains();
+  const accountTezAddress = useAccountAddressForTezos();
+  const accountEvmAddress = useAccountAddressForEvm();
 
   useShortcutAccountSelectModalIsOpened(() => setOpened(false));
 
@@ -53,51 +63,59 @@ export const ChainsDropdown = memo<Props>(({ opened, setOpened, controller }) =>
   return (
     <DropdownWrapper opened={opened} design="dark" className="origin-top-right mt-1 p-2">
       <div className={styles.scroll}>
-        <h2 className={h2ClassName}>
-          <SignalAltIcon className="w-auto h-4 mr-1 stroke-current" />
-          {TempleChainTitle.tezos} <T id="networks" />
-        </h2>
-
-        {tezosChains.map(chain => {
-          const { chainId } = chain;
-          const selected = chainId === selectedChain.chainId && selectedChain.kind === 'tezos';
-
-          return (
-            <ChainButton
-              key={chainId}
-              chain={chain}
-              selected={selected}
-              onClick={() => {
-                setOpened(false);
-
-                if (!selected) handleTezosNetworkSelect(chain);
-              }}
-            />
-          );
-        })}
-
-        <h2 className={clsx(h2ClassName, 'mt-2')}>
-          <SignalAltIcon className="w-auto h-4 mr-1 stroke-current" />
-          {TempleChainTitle.evm} <T id="networks" />
-        </h2>
-
-        {evmChains.map(chain => {
-          const { chainId } = chain;
-          const selected = chainId === selectedChain.chainId && selectedChain.kind === 'evm';
-
-          return (
-            <ChainButton
-              key={chainId}
-              chain={chain}
-              selected={selected}
-              onClick={() => {
-                setOpened(false);
-
-                if (!selected) handleEvmNetworkSelect(chain);
-              }}
-            />
-          );
-        })}
+        {(!shouldFilterByCurrentAccount || accountTezAddress) && (
+          <>
+            <h2 className={h2ClassName}>
+              <SignalAltIcon className="w-auto h-4 mr-1 stroke-current" />
+              {TempleChainTitle.tezos} <T id="networks" />
+            </h2>
+
+            {tezosChains.map(chain => {
+              const { chainId } = chain;
+              const selected = chainId === selectedChain?.chainId && selectedChain.kind === 'tezos';
+
+              return (
+                <ChainButton
+                  key={chainId}
+                  chain={chain}
+                  selected={selected}
+                  onClick={() => {
+                    setOpened(false);
+
+                    if (!selected) handleTezosNetworkSelect(chain);
+                  }}
+                />
+              );
+            })}
+          </>
+        )}
+
+        {(!shouldFilterByCurrentAccount || accountEvmAddress) && (
+          <>
+            <h2 className={clsx(h2ClassName, 'mt-2')}>
+              <SignalAltIcon className="w-auto h-4 mr-1 stroke-current" />
+              {TempleChainTitle.evm} <T id="networks" />
+            </h2>
+
+            {evmChains.map(chain => {
+              const { chainId } = chain;
+              const selected = chainId === selectedChain?.chainId && selectedChain.kind === 'evm';
+
+              return (
+                <ChainButton
+                  key={chainId}
+                  chain={chain}
+                  selected={selected}
+                  onClick={() => {
+                    setOpened(false);
+
+                    if (!selected) handleEvmNetworkSelect(chain);
+                  }}
+                />
+              );
+            })}
+          </>
+        )}
       </div>
     </DropdownWrapper>
   );

src/app/templates/ChainSelect/controller.ts

@@ -7,12 +7,14 @@ export interface ChainSelectController {
   setValue: SyncFn<OneOfChains>;
 }
 
-export const useChainSelectController = (): ChainSelectController => {
+export const useChainSelectController = (shouldFilterByCurrentAccount = true): ChainSelectController => {
   const tezosMainnetChain = useTezosMainnetChain();
   const evmMainnet = useEthereumMainnetChain();
   const accountTezAddress = useAccountAddressForTezos();
 
-  const [value, setValue] = useState<OneOfChains>(() => (accountTezAddress ? tezosMainnetChain : evmMainnet));
+  const [value, setValue] = useState<OneOfChains>(() =>
+    accountTezAddress || !shouldFilterByCurrentAccount ? tezosMainnetChain : evmMainnet
+  );
 
   return useMemo(() => ({ value, setValue }), [value]);
 };

src/app/templates/ChainSelect/index.tsx

@@ -17,16 +17,23 @@ export { useChainSelectController } from './controller';
 
 interface Props {
   controller: ChainSelectController;
+  shouldFilterByCurrentAccount?: boolean;
 }
 
-const ChainSelect = memo<Props>(({ controller }) => {
+const ChainSelect = memo<Props>(({ controller, shouldFilterByCurrentAccount = true }) => {
   const selectedChain = controller.value;
 
   return (
     <Popper
       placement="bottom-end"
       strategy="fixed"
-      popup={props => <ChainsDropdown controller={controller} {...props} />}
+      popup={props => (
+        <ChainsDropdown
+          shouldFilterByCurrentAccount={shouldFilterByCurrentAccount}
+          controller={controller}
+          {...props}
+        />
+      )}
     >
       {({ ref, opened, toggleOpened }) => (
         <Button

src/app/templates/NetworksSettings/index.tsx

@@ -2,6 +2,7 @@ import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 
 import { EmptyState } from 'app/atoms/EmptyState';
 import { useSearchParamsBoolean } from 'app/hooks/use-search-params-boolean';
+import { MAIN_CHAINS_IDS } from 'lib/constants';
 import { t } from 'lib/i18n';
 import { filterNetworksByName } from 'lib/ui/filter-networks-by-name';
 import { useBooleanState } from 'lib/ui/hooks';
@@ -28,7 +29,11 @@ export const NetworksSettings = memo<SettingsTabProps>(({ setHeaderChildren }) =
   const [searchValue, setSearchValue] = useState('');
 
   const allChains = useMemo(
-    () => [...Object.values(tezosChainsRecord), ...Object.values(evmChainsRecord)],
+    () =>
+      [...Object.values(tezosChainsRecord), ...Object.values(evmChainsRecord)].sort(
+        ({ chainId: aChainId }, { chainId: bChainId }) =>
+          MAIN_CHAINS_IDS.indexOf(bChainId) - MAIN_CHAINS_IDS.indexOf(aChainId)
+      ),
     [evmChainsRecord, tezosChainsRecord]
   );
   const matchingChains = useMemo(() => filterNetworksByName(allChains, searchValue), [allChains, searchValue]);

src/lib/constants.ts

@@ -1,3 +1,10 @@
+import {
+  ETHEREUM_MAINNET_CHAIN_ID,
+  ETH_SEPOLIA_CHAIN_ID,
+  TEZOS_MAINNET_CHAIN_ID,
+  TempleTezosChainId
+} from './temple/types';
+
 export enum ContentScriptType {
   ExternalLinksActivity = 'ExternalLinksActivity',
   ExternalAdsActivity = 'ExternalAdsActivity',
@@ -82,3 +89,10 @@ export const SHOULD_BACKUP_MNEMONIC_STORAGE_KEY = 'SHOULD_BACKUP_MNEMONIC';
 export const DEFAULT_SEED_PHRASE_WORDS_AMOUNT = 12;
 
 export const DEFAULT_PASSWORD_INPUT_PLACEHOLDER = '••••••••••';
+
+export const MAIN_CHAINS_IDS = [
+  TEZOS_MAINNET_CHAIN_ID,
+  ETHEREUM_MAINNET_CHAIN_ID,
+  TempleTezosChainId.Ghostnet,
+  ETH_SEPOLIA_CHAIN_ID
+];

src/lib/temple/types.ts

@@ -34,6 +34,7 @@ export interface TempleState {
 
 export const TEZOS_MAINNET_CHAIN_ID = 'NetXdQprcVkpaWU';
 export const ETHEREUM_MAINNET_CHAIN_ID = 1;
+export const ETH_SEPOLIA_CHAIN_ID = 11155111;
 
 export enum TempleTezosChainId {
   Mainnet = TEZOS_MAINNET_CHAIN_ID,

src/temple/front/chains.ts

@@ -1,6 +1,6 @@
 import type { TID } from 'lib/i18n';
 import { EvmNativeTokenMetadata } from 'lib/metadata/types';
-import { TEZOS_MAINNET_CHAIN_ID } from 'lib/temple/types';
+import { ETHEREUM_MAINNET_CHAIN_ID, TEZOS_MAINNET_CHAIN_ID } from 'lib/temple/types';
 import type { StoredTezosNetwork, StoredEvmNetwork } from 'temple/networks';
 import type { TempleChainKind } from 'temple/types';
 
@@ -51,4 +51,4 @@ export const useEvmChainByChainId = (evmChainId: number): EvmChain | undefined =
   return allEvmChains[evmChainId];
 };
 
-export const useEthereumMainnetChain = () => useEvmChainByChainId(1)!;
+export const useEthereumMainnetChain = () => useEvmChainByChainId(ETHEREUM_MAINNET_CHAIN_ID)!;