Fix some bugs from comments in Jira

madfish-solutions · Oct 10, 2024 · ce6d43e · ce6d43e
1 parent e5db334
commit ce6d43e
Show file tree

Hide file tree

Showing 22 changed files with 338 additions and 210 deletions.
diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
@@ -2207,10 +2207,21 @@
     "message": "Default account (the first one)"
   },
   "defaultNetworksGroup": {
-    "message": "Default"
+    "message": "Default Networks"
   },
   "customNetworksGroup": {
-    "message": "Custom"
+    "message": "Custom Networks"
+  },
+  "chainTestnetsGroup": {
+    "message": "$chain$ Testnets",
+    "placeholders": {
+      "chain": {
+        "content": "$1"
+      }
+    }
+  },
+  "customTestnetsGroup": {
+    "message": "Custom Testnets"
   },
   "active": {
     "message": "Active"
@@ -2254,32 +2265,26 @@
   "removeNetwork": {
     "message": "Remove Network"
   },
-  "removeNetworkModalTitle": {
-    "message": "Remove $network$?",
-    "placeholders": {
-      "network": {
-        "content": "$1"
-      }
-    }
+  "removeNetworkModalTitleLeftPart": {
+    "message": "Remove "
+  },
+  "removeNetworkModalTitleRightPart": {
+    "message": "?"
   },
   "removeNetworkModalDescription": {
     "message": "You won’t be able to check the assets on this\nnetwork anymore."
   },
-  "editSomeRpc": {
-    "message": "Edit $name$ RPC",
-    "placeholders": {
-      "name": {
-        "content": "$1"
-      }
-    }
+  "editSomeRpcLeftPart": {
+    "message": "Edit "
   },
-  "editSomeBlockExplorer": {
-    "message": "Edit $name$",
-    "placeholders": {
-      "name": {
-        "content": "$1"
-      }
-    }
+  "editSomeRpcRightPart": {
+    "message": " RPC"
+  },
+  "editSomeBlockExplorerLeftPart": {
+    "message": "Edit "
+  },
+  "editSomeBlockExplorerRightPart": {
+    "message": ""
   },
   "rpcDoesNotRespond": {
     "message": "RPC doesn’t respond"
@@ -2306,24 +2311,20 @@
       }
     }
   },
-  "confirmDeleteRpcTitle": {
-    "message": "Delete $name$ RPC?",
-    "placeholders": {
-      "name": {
-        "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."
   },
-  "confirmDeleteBlockExplorerTitle": {
-    "message": "Delete $name$?",
-    "placeholders": {
-      "name": {
-        "content": "$1"
-      }
-    }
+  "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."

diff --git a/src/app/atoms/PageModal/index.tsx b/src/app/atoms/PageModal/index.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, memo } from 'react';
+import React, { FC, PropsWithChildren, ReactNode } from 'react';
 
 import clsx from 'clsx';
 import Modal from 'react-modal';
@@ -15,8 +15,9 @@ import { IconBase } from '../IconBase';
 import ModStyles from './styles.module.css';
 
 interface Props extends TestIDProps {
-  title: string;
+  title: ReactNode | ReactNode[];
   opened: boolean;
+  headerClassName?: string;
   shouldShowBackButton?: boolean;
   onRequestClose: EmptyFn;
   onGoBack?: EmptyFn;
@@ -25,52 +26,60 @@ interface Props extends TestIDProps {
 
 export const CLOSE_ANIMATION_TIMEOUT = 300;
 
-export const PageModal = memo<PropsWithChildren<Props>>(
-  ({ title, opened, shouldShowBackButton, onRequestClose, onGoBack, children, testID, animated = true }) => {
-    const { fullPage } = useAppEnv();
+export const PageModal: FC<PropsWithChildren<Props>> = ({
+  title,
+  opened,
+  headerClassName,
+  shouldShowBackButton,
+  onRequestClose,
+  onGoBack,
+  children,
+  testID,
+  animated = true
+}) => {
+  const { fullPage } = useAppEnv();
 
-    return (
-      <Modal
-        isOpen={opened}
-        closeTimeoutMS={animated ? CLOSE_ANIMATION_TIMEOUT : undefined}
-        htmlOpenClassName="overflow-hidden" // Disabling page scroll and/or bounce behind modal
-        bodyOpenClassName={ACTIVATE_CONTENT_FADER_CLASSNAME}
-        overlayClassName={{
-          base: clsx('fixed z-modal-page inset-0', fullPage ? 'pt-13 pb-8' : 'pt-4'),
-          afterOpen: '',
-          beforeClose: ''
-        }}
-        className={{
-          base: clsx(
-            LAYOUT_CONTAINER_CLASSNAME,
-            'h-full flex flex-col bg-white overflow-hidden',
-            fullPage ? 'rounded-lg' : 'rounded-t-lg',
-            ModStyles.base,
-            animated && 'ease-out duration-300'
-          ),
-          afterOpen: ModStyles.opened,
-          beforeClose: ModStyles.closed
-        }}
-        appElement={document.getElementById('root')!}
-        onRequestClose={onRequestClose}
-        testId={testID}
-      >
-        <div className="flex items-center p-4 border-b border-lines">
-          <div className="w-12">
-            {shouldShowBackButton && (
-              <IconBase Icon={ChevronLeftIcon} size={16} className="text-grey-2 cursor-pointer" onClick={onGoBack} />
-            )}
-          </div>
+  return (
+    <Modal
+      isOpen={opened}
+      closeTimeoutMS={animated ? CLOSE_ANIMATION_TIMEOUT : undefined}
+      htmlOpenClassName="overflow-hidden" // Disabling page scroll and/or bounce behind modal
+      bodyOpenClassName={ACTIVATE_CONTENT_FADER_CLASSNAME}
+      overlayClassName={{
+        base: clsx('fixed z-modal-page inset-0', fullPage ? 'pt-13 pb-8' : 'pt-4'),
+        afterOpen: '',
+        beforeClose: ''
+      }}
+      className={{
+        base: clsx(
+          LAYOUT_CONTAINER_CLASSNAME,
+          'h-full flex flex-col bg-white overflow-hidden',
+          fullPage ? 'rounded-lg' : 'rounded-t-lg',
+          ModStyles.base,
+          animated && 'ease-out duration-300'
+        ),
+        afterOpen: ModStyles.opened,
+        beforeClose: ModStyles.closed
+      }}
+      appElement={document.getElementById('root')!}
+      onRequestClose={onRequestClose}
+      testId={testID}
+    >
+      <div className="flex items-center p-4 border-b border-lines">
+        <div className="w-12">
+          {shouldShowBackButton && (
+            <IconBase Icon={ChevronLeftIcon} size={16} className="text-grey-2 cursor-pointer" onClick={onGoBack} />
+          )}
+        </div>
 
-          <div className="flex-1 text-center text-font-regular-bold">{title}</div>
+        <div className={clsx('flex-1 text-center text-font-regular-bold', headerClassName)}>{title}</div>
 
-          <div className="w-12 flex justify-end">
-            <IconBase Icon={ExIcon} size={16} className="text-grey-2 cursor-pointer" onClick={onRequestClose} />
-          </div>
+        <div className="w-12 flex justify-end">
+          <IconBase Icon={ExIcon} size={16} className="text-grey-2 cursor-pointer" onClick={onRequestClose} />
         </div>
+      </div>
 
-        <div className="flex-1 flex flex-col overflow-hidden">{children}</div>
-      </Modal>
-    );
-  }
-);
+      <div className="flex-1 flex flex-col overflow-hidden">{children}</div>
+    </Modal>
+  );
+};
diff --git a/src/app/atoms/SettingsCell.tsx b/src/app/atoms/SettingsCell.tsx
@@ -12,6 +12,7 @@ interface SettingsCellPropsBase<P extends ComponentBase = ComponentBase> {
   cellIcon?: ReactNode;
   cellName: ReactNode;
   cellNameClassName?: string;
+  wrapCellName?: boolean;
   Component: 'div' | FC<P>;
 }
 
@@ -29,22 +30,21 @@ export const SettingsCell = <P extends ComponentBase>({
   className,
   cellIcon,
   cellName,
-  cellNameClassName = 'text-font-medium-bold',
+  cellNameClassName = 'text-left text-font-medium-bold flex-1',
+  wrapCellName = true,
   isLast = true,
   children,
   Component,
   ...restProps
 }: SettingsCellProps<P>) => {
   return (
     <Component
-      className={clsx('flex justify-between items-center p-3', !isLast && 'border-b-0.5 border-lines', className)}
+      className={clsx('flex items-center p-3 gap-2', !isLast && 'border-b-0.5 border-lines', className)}
       {...restProps}
     >
-      <div className="flex items-center gap-2">
-        {cellIcon}
+      {cellIcon}
 
-        <span className={cellNameClassName}>{cellName}</span>
-      </div>
+      {wrapCellName ? <span className={cellNameClassName}>{cellName}</span> : cellName}
 
       {children}
     </Component>

diff --git a/src/app/atoms/action-modal/action-modal.tsx b/src/app/atoms/action-modal/action-modal.tsx
@@ -19,36 +19,39 @@ export interface ActionModalProps {
   onClose?: EmptyFn;
   children?: ReactNode | ReactNode[];
   title?: ReactNode;
+  headerClassName?: string;
   className?: string;
 }
 
-export const ActionModal = memo<ActionModalProps>(({ onClose, children, hasCloseButton = true, title }) => {
-  const { fullPage } = useAppEnv();
+export const ActionModal = memo<ActionModalProps>(
+  ({ onClose, children, hasCloseButton = true, headerClassName, title }) => {
+    const { fullPage } = useAppEnv();
 
-  return (
-    <CustomModal
-      isOpen
-      className="rounded-lg"
-      overlayClassName={clsx(
-        'backdrop-blur-xs',
-        fullPage && [
-          FULL_PAGE_WRAP_OVERLAY_CLASSNAME,
-          actionModalStyles.fullPageOverlay,
-          LAYOUT_CONTAINER_CLASSNAME,
-          FULL_PAGE_LAYOUT_CONTAINER_CLASSNAME
-        ]
-      )}
-      onRequestClose={onClose}
-    >
-      <div className="relative p-3 border-b-0.5 border-lines w-modal">
-        <h1 className="text-center text-font-regular-bold mx-9">{title}</h1>
-        {hasCloseButton && (
-          <Button className="absolute top-3 right-3" onClick={onClose}>
-            <IconBase Icon={CloseIcon} size={16} className="text-grey-2" />
-          </Button>
+    return (
+      <CustomModal
+        isOpen
+        className="rounded-lg"
+        overlayClassName={clsx(
+          'backdrop-blur-xs',
+          fullPage && [
+            FULL_PAGE_WRAP_OVERLAY_CLASSNAME,
+            actionModalStyles.fullPageOverlay,
+            LAYOUT_CONTAINER_CLASSNAME,
+            FULL_PAGE_LAYOUT_CONTAINER_CLASSNAME
+          ]
         )}
-      </div>
-      {children}
-    </CustomModal>
-  );
-});
+        onRequestClose={onClose}
+      >
+        <div className="relative p-3 border-b-0.5 border-lines w-modal">
+          <h1 className={clsx('text-center text-font-regular-bold mx-12', headerClassName)}>{title}</h1>
+          {hasCloseButton && (
+            <Button className="absolute top-3 right-3" onClick={onClose}>
+              <IconBase Icon={CloseIcon} size={16} className="text-grey-2" />
+            </Button>
+          )}
+        </div>
+        {children}
+      </CustomModal>
+    );
+  }
+);
diff --git a/src/app/layouts/PageLayout/DefaultHeader.tsx b/src/app/layouts/PageLayout/DefaultHeader.tsx
@@ -69,7 +69,7 @@ export const DefaultHeader = memo<PropsWithChildren<DefaultHeaderProps>>(
           </div>
 
           {pageTitle && (
-            <div className="flex items-center text-center text-font-regular-bold truncate">{pageTitle}</div>
+            <div className="flex items-center text-center text-font-regular-bold truncate max-w-64">{pageTitle}</div>
           )}
 
           <div className="flex-1 flex items-center justify-end">{headerRightElem}</div>