TW-1544 Networks management

e2e/src/page-objects/index.ts

@@ -5,7 +5,6 @@ import { ConfirmationModalPage } from '../page-objects/pages/confirmation-modal.
 import { GeneralSettingsPage } from '../page-objects/pages/general-settings.page';
 import { HomePage } from '../page-objects/pages/home.page';
 import { BackupOptionsModalPage } from '../page-objects/pages/modal/backup-options-modal.page';
-import { NetworksPage } from '../page-objects/pages/networks.page';
 import { NotificationContentPage } from '../page-objects/pages/notification-content.page';
 import { NotificationsListPage } from '../page-objects/pages/notifications-list.page';
 import { SwapPage } from '../page-objects/pages/swap.page';
@@ -40,7 +39,7 @@ export const Pages = {
   Swap: new SwapPage(),
   AddressBook: new AddressBookPage(),
   ConfirmationModal: new ConfirmationModalPage(),
-  Networks: new NetworksPage(),
+  // TODO: add tests for networks settings
   CollectiblePage: new CollectiblePage(),
   CollectiblesTabPage: new CollectiblesTabPage(),
   NotificationsList: new NotificationsListPage(),

package.json

@@ -172,6 +172,7 @@
     "react-dev-utils": "^12",
     "react-dom": "18.2.0",
     "react-hook-form": "5.3.1",
+    "react-hook-form-v7": "npm:react-hook-form@7.53.0",
     "react-hot-toast": "^2.4.1",
     "react-infinite-scroll-component": "^6.1.0",
     "react-json-view": "1.21.3",

public/_locales/en/messages.json

@@ -243,6 +243,9 @@
       }
     }
   },
+  "networkEnabled": {
+    "message": "Network Enabled"
+  },
   "pkhLabel": {
     "message": "Account: $pkh$",
     "placeholders": {
@@ -2199,6 +2202,129 @@
   "defaultAccount": {
     "message": "Default account (the first one)"
   },
+  "defaultNetworksGroup": {
+    "message": "Default Networks"
+  },
+  "customNetworksGroup": {
+    "message": "Custom Networks"
+  },
+  "chainTestnetsGroup": {
+    "message": "$chain$ Testnets",
+    "placeholders": {
+      "chain": {
+        "content": "$1"
+      }
+    }
+  },
+  "customTestnetsGroup": {
+    "message": "Custom Testnets"
+  },
+  "active": {
+    "message": "Active"
+  },
+  "rpcEndpoints": {
+    "message": "RPC Endpoints"
+  },
+  "activeRpc": {
+    "message": "Active RPC"
+  },
+  "activeBlockExplorer": {
+    "message": "Active"
+  },
+  "deleteRpc": {
+    "message": "Delete RPC"
+  },
+  "deleteBlockExplorer": {
+    "message": "Delete"
+  },
+  "rpcAdded": {
+    "message": "RPC added"
+  },
+  "blockExplorerAdded": {
+    "message": "Block explorer added"
+  },
+  "invalidChainId": {
+    "message": "Invalid chain ID"
+  },
+  "chainId": {
+    "message": "Chain ID"
+  },
+  "chainIdTooltip": {
+    "message": "The chain ID is used for signing transactions. It must match the chain ID returned by the network."
+  },
+  "blockExplorerUrl": {
+    "message": "Block explorer URL"
+  },
+  "testnet": {
+    "message": "Testnet"
+  },
+  "removeNetwork": {
+    "message": "Remove Network"
+  },
+  "removeNetworkModalTitleLeftPart": {
+    "message": "Remove "
+  },
+  "removeNetworkModalTitleRightPart": {
+    "message": "?"
+  },
+  "removeNetworkModalDescription": {
+    "message": "You won’t be able to check the assets on this\nnetwork anymore."
+  },
+  "editSomeRpcLeftPart": {
+    "message": "Edit "
+  },
+  "editSomeRpcRightPart": {
+    "message": " RPC"
+  },
+  "editSomeBlockExplorerLeftPart": {
+    "message": "Edit "
+  },
+  "editSomeBlockExplorerRightPart": {
+    "message": ""
+  },
+  "rpcDoesNotRespond": {
+    "message": "RPC doesn’t respond"
+  },
+  "rpcDoesNotMatchChain": {
+    "message": "RPC doesn’t match chain"
+  },
+  "wrongAddress": {
+    "message": "Wrong address"
+  },
+  "addSomeRpc": {
+    "message": "Add $network$ RPC",
+    "placeholders": {
+      "network": {
+        "content": "$1"
+      }
+    }
+  },
+  "addSomeBlockExplorer": {
+    "message": "Add $network$ explorer",
+    "placeholders": {
+      "network": {
+        "content": "$1"
+      }
+    }
+  },
+  "confirmDeleteRpcTitleLeftPart": {
+    "message": "Delete "
+  },
+  "confirmDeleteRpcTitleRightPart": {
+    "message": " RPC?"
+  },
+  "confirmDeleteRpcDescription": {
+    "message": "This will remove the RPC from the list and automatically switch the network to the default RPC endpoint."
+  },
+  "confirmDeleteBlockExplorerTitleLeftPart": {
+    "message": "Delete "
+  },
+  "confirmDeleteBlockExplorerTitleRightPart": {
+    "message": "?"
+  },
+  "confirmDeleteBlockExplorerDescription": {
+    "message": "This will remove the block explorer from the list and automatically switch the network to the default one."
+  },
   "loadMore": {
     "message": "Load more"
   },
@@ -2211,6 +2337,14 @@
   "invalidJsonInput": {
     "message": "Invalid JSON"
   },
+  "anotherChainIdError": {
+    "message": "The chain ID used by RPC is $chainId$",
+    "placeholders": {
+      "chainId": {
+        "content": "$1"
+      }
+    }
+  },
   "unknownErrorFromRPC": {
     "message": "Failed to send request to $url$. Invalid request provided or RPC node is temporarily unreachable.",
     "placeholders": {
@@ -2300,7 +2434,7 @@
     "message": "Feel free to join and ask your questions 😊"
   },
   "blockExplorer": {
-    "message": "Blockchain explorer"
+    "message": "Block Explorer"
   },
   "viewOnBlockExplorer": { "message": "View on block explorer" },
   "specifyTokenId": {

src/app/PageRouter.tsx

@@ -22,7 +22,9 @@ import { usePageRouterAnalytics } from 'lib/analytics';
 import { Notifications, NotificationsItem } from 'lib/notifications/components';
 import { useTempleClient } from 'lib/temple/front';
 import * as Woozie from 'lib/woozie';
+import { TempleChainKind } from 'temple/types';
 
+import { ChainSettings } from './pages/ChainSettings';
 import { ImportWallet } from './pages/ImportWallet';
 import { Market } from './pages/Market';
 import { StakingPage } from './pages/Staking';
@@ -90,6 +92,10 @@ const ROUTE_MAP = Woozie.createMap<RouteContext>([
       <CollectiblePage chainKind={chainKind!} chainId={chainId!} assetSlug={assetSlug!} />
     ))
   ],
+  [
+    '/settings/networks/:chainKind/:chainId',
+    onlyReady(({ chainId, chainKind }) => <ChainSettings chainKind={chainKind as TempleChainKind} chainId={chainId!} />)
+  ],
   ['/settings/:tabSlug?', onlyReady(({ tabSlug }) => <Settings tabSlug={tabSlug} />)],
   ['/market', onlyReady(onlyInFullPage(() => <Market />))],
   ['/buy/crypto/exolix', onlyReady(onlyInFullPage(() => <Exolix />))],

src/app/atoms/FilterButton.tsx

@@ -7,7 +7,7 @@ import { ReactComponent as FilterOffIcon } from 'app/icons/base/filteroff.svg';
 import { ReactComponent as FilterOnIcon } from 'app/icons/base/filteron.svg';
 import { useAssetsFilterOptionsSelector } from 'app/store/assets-filter-options/selectors';
 import { AssetsFilterOptionsInitialState } from 'app/store/assets-filter-options/state';
-import { ACTIVE_STYLED_BUTTON_COLORS_CLASSNAME } from 'lib/ui/button-like-styles';
+import { ACTIVE_STYLED_BUTTON_COLORS_CLASSNAME } from 'lib/ui/use-styled-button-or-link-props';
 
 import { Button } from './Button';
 import { IconBase } from './IconBase';

src/app/atoms/FormField.tsx

@@ -43,6 +43,7 @@ export interface FormFieldProps extends TestIDProperty, Omit<FormFieldAttrs, 'ty
   labelWarning?: ReactNode;
   errorCaption?: ReactNode;
   shouldShowErrorCaption?: boolean;
+  reserveSpaceForError?: boolean;
   warning?: boolean;
   containerClassName?: string;
   labelContainerClassName?: string;
@@ -90,6 +91,7 @@ export const FormField = forwardRef<FormFieldElement, FormFieldProps>(
       labelWarning,
       errorCaption,
       shouldShowErrorCaption = true,
+      reserveSpaceForError = true,
       warning = false,
       containerClassName,
       labelContainerClassName,
@@ -257,7 +259,12 @@ export const FormField = forwardRef<FormFieldElement, FormFieldProps>(
           {secretCovered && <SecretCover onClick={handleSecretBannerClick} />}
         </div>
 
-        {shouldShowErrorCaption && <ErrorCaption errorCaption={errorCaption} />}
+        {shouldShowErrorCaption &&
+          (reserveSpaceForError && !errorCaption ? (
+            <div className="size-4" />
+          ) : (
+            <ErrorCaption errorCaption={errorCaption} />
+          ))}
       </div>
     );
   }

src/app/atoms/IconBase.tsx

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 
 export type Size = 12 | 16 | 24 | 32;
 
-interface Props {
+export interface IconBaseProps {
   /** SVG of the 16px icon base container */
   Icon: ImportedSVGComponent;
   size?: Size;
@@ -13,7 +13,7 @@ interface Props {
 }
 
 /** For monochrome icons */
-export const IconBase = memo<Props>(({ size = 16, className, Icon, onClick }) => (
+export const IconBase = memo<IconBaseProps>(({ size = 16, className, Icon, onClick }) => (
   <div data-icon-size={size} className={clsx(CONTAINER_CLASSNAME[size], className)} onClick={onClick}>
     <Icon className="w-full h-full stroke-current fill-current" transform={SCALE_TRANSFORMS[size]} />
   </div>

src/app/atoms/IconButton.tsx

@@ -6,7 +6,7 @@ import {
   StyledButtonColor,
   ACTIVE_STYLED_BUTTON_COLORS_CLASSNAME,
   getStyledButtonColorsClassNames
-} from 'lib/ui/button-like-styles';
+} from 'lib/ui/use-styled-button-or-link-props';
 import useTippy from 'lib/ui/useTippy';
 import { combineRefs } from 'lib/ui/utils';
 

src/app/atoms/PageModal/actions-buttons-box.tsx

@@ -4,46 +4,45 @@ import clsx from 'clsx';
 import { throttle } from 'lodash';
 import { useDispatch } from 'react-redux';
 
-import { useAppEnv } from 'app/env';
 import { setToastsContainerBottomShiftAction } from 'app/store/settings/actions';
 
 interface ActionsButtonsBoxProps extends HTMLAttributes<HTMLDivElement> {
   shouldCastShadow?: boolean;
   flexDirection?: 'row' | 'col';
+  shouldChangeBottomShift?: boolean;
 }
 
 export const ActionsButtonsBox = memo<ActionsButtonsBoxProps>(
-  ({ className, shouldCastShadow, flexDirection = 'col', ...restProps }) => {
+  ({ className, shouldCastShadow, flexDirection = 'col', shouldChangeBottomShift = true, ...restProps }) => {
     const dispatch = useDispatch();
-    const { popup } = useAppEnv();
 
     useEffect(() => {
-      return () => void dispatch(setToastsContainerBottomShiftAction(0));
-    }, []);
+      return () => void (shouldChangeBottomShift && dispatch(setToastsContainerBottomShiftAction(0)));
+    }, [dispatch, shouldChangeBottomShift]);
 
     const handleResize = useMemo(
       () =>
         throttle<ResizeObserverCallback>(entries => {
           const borderBoxSize = entries.map(entry => entry.borderBoxSize?.[0]).filter(Boolean)[0];
 
-          if (borderBoxSize) {
-            dispatch(setToastsContainerBottomShiftAction(borderBoxSize.blockSize - (popup ? 16 : 0)));
+          if (borderBoxSize && shouldChangeBottomShift) {
+            dispatch(setToastsContainerBottomShiftAction(borderBoxSize.blockSize - 24));
           }
         }, 100),
-      [dispatch, popup]
+      [dispatch, shouldChangeBottomShift]
     );
 
     const resizeObserver = useMemo(() => new ResizeObserver(handleResize), [handleResize]);
     const rootRef = useCallback(
       (node: HTMLDivElement | null) => {
         resizeObserver.disconnect();
-        if (node) {
+        if (node && shouldChangeBottomShift) {
           resizeObserver.observe(node);
           const { height } = node.getBoundingClientRect();
           dispatch(setToastsContainerBottomShiftAction(height));
         }
       },
-      [dispatch, resizeObserver]
+      [dispatch, resizeObserver, shouldChangeBottomShift]
     );
 
     return (