Merge pull request PolkaGate#1443 from PolkaGate/hideNumbersBeforLogin

add hide numbers on login page

packages/extension-polkagate/src/components/Loading.tsx

@@ -1,10 +1,11 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
 
 /* eslint-disable react/jsx-max-props-per-line */
 
-import { Box, Grid, Theme, useTheme } from '@mui/material';
+import type { Theme} from '@mui/material';
+
+import { Box, Grid, useTheme } from '@mui/material';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { blake2AsHex } from '@polkadot/util-crypto';
@@ -26,18 +27,17 @@ interface Props {
   children?: React.ReactNode;
 }
 
-
-export type LoginInfo = {
+export interface LoginInfo {
   status: 'noLogin' | 'mayBeLater' | 'justSet' | 'set' | 'forgot' | 'reset';
   lastLoginTime?: number;
   hashedPassword?: string;
   addressesToForget?: string[];
 }
 
-export const updateStorage = async (label: string, newInfo: unknown) => {
+export const updateStorage = async (label: string, newInfo: object) => {
   try {
     // Retrieve the previous value
-    const previousData = await getStorage(label);
+    const previousData = await getStorage(label) as object;
 
     // Update the previous data with the new data
     const updatedData = { ...previousData, ...newInfo } as unknown;
@@ -47,26 +47,26 @@ export const updateStorage = async (label: string, newInfo: unknown) => {
 
     return true;
   } catch (error) {
-    console.error('Error while updating data');
+    console.error('Error while updating data', error);
 
     return false;
   }
 };
 
-export const getStorage = (label: string, parse = false) => {
+export const getStorage = (label: string, parse = false): Promise<object | string> => {
   return new Promise((resolve, reject) => {
     chrome.storage.local.get([label], (result) => {
       if (chrome.runtime.lastError) {
         reject(chrome.runtime.lastError);
       } else {
-        resolve(parse ? JSON.parse((result[label] || '{}') as string) : result[label]);
+        resolve(parse ? JSON.parse((result[label] || '{}') as string) as object : result[label] as object);
       }
     });
   });
 };
 
 export const watchStorage = (label: string, setChanges: ((value: any) => void), parse = false) => {
-  return new Promise((resolve, reject) => {
+  return new Promise((resolve) => {
     chrome.storage.onChanged.addListener(function (changes, areaName) {
       if (areaName === 'local' && label in changes) {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
@@ -111,7 +111,7 @@ const FlyingLogo = ({ theme }: { theme: Theme }) => (
   />
 );
 
-export default function Loading({ children }: Props): React.ReactElement<Props> {
+export default function Loading ({ children }: Props): React.ReactElement<Props> {
   const theme = useTheme();
   const manifest = useManifest();
 
@@ -251,7 +251,7 @@ export default function Loading({ children }: Props): React.ReactElement<Props>
             {isFlying && isPopupOpenedByExtension
               ? <FlyingLogo theme={theme} />
               : <>
-                {[STEPS.ASK_TO_SET_PASSWORD, STEPS.SHOW_LOGIN].includes(step) && (isPopupOpenedByExtension || isExtensionLocked) &&
+                { step !== undefined && [STEPS.ASK_TO_SET_PASSWORD, STEPS.SHOW_LOGIN].includes(step) && (isPopupOpenedByExtension || isExtensionLocked) &&
                   <Grid container item justifyContent='center' mt='33px' my='35px'>
                     <StillLogo theme={theme} />
                   </Grid>
@@ -269,7 +269,7 @@ export default function Loading({ children }: Props): React.ReactElement<Props>
                     setStep={setStep}
                   />
                 }
-                {[STEPS.SHOW_LOGIN].includes(step) &&
+                {step !== undefined && [STEPS.SHOW_LOGIN].includes(step) &&
                   <Login
                     isPasswordError={isPasswordError}
                     onPassChange={onPassChange}

packages/extension-polkagate/src/popup/home/news.ts

@@ -9,6 +9,12 @@ export interface News {
 }
 
 export const news: News[] = [
+  {
+    version: '0.6.9',
+    notes: [
+      'Hide Numbers on Login Page. Add an option to hide numbers on the login page before logging in.'
+    ]
+  },
   {
     version: '0.6.8',
     notes: [

packages/extension-polkagate/src/popup/passwordManagement/Login.tsx

@@ -1,15 +1,14 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
 
 /* eslint-disable react/jsx-max-props-per-line */
 
 import { Grid, Typography, useTheme } from '@mui/material';
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { openOrFocusTab } from '@polkadot/extension-polkagate/src/fullscreen/accountDetails/components/CommonTasks';
 
-import { Password, PButton, WrongPasswordAlert } from '../../components';
+import { HideIcon, Password, PButton, ShowIcon, WrongPasswordAlert } from '../../components';
 import { useIsExtensionPopup, useTranslation } from '../../hooks';
 import { STEPS } from './constants';
 
@@ -25,6 +24,8 @@ function Login({ isPasswordError, onPassChange, onUnlock, setStep }: Props): Rea
   const theme = useTheme();
   const isPopup = useIsExtensionPopup();
 
+  const [hideNumbers, setHideNumbers] = useState<boolean>();
+
   const onForgotPassword = useCallback((): void => {
     if (isPopup) {
       return setStep(STEPS.SHOW_DELETE_ACCOUNT_CONFIRMATION);
@@ -34,9 +35,29 @@ function Login({ isPasswordError, onPassChange, onUnlock, setStep }: Props): Rea
     openOrFocusTab('/forgot-password', true);
   }, [isPopup, setStep]);
 
+  useEffect(() => {
+    const isHide = window.localStorage.getItem('hide_numbers');
+
+    isHide === 'false' || isHide === null ? setHideNumbers(false) : setHideNumbers(true);
+  }, [setHideNumbers]);
+
+  const onHideClick = useCallback(() => {
+    setHideNumbers && setHideNumbers(!hideNumbers);
+    window.localStorage.setItem('hide_numbers', hideNumbers ? 'false' : 'true');
+  }, [hideNumbers, setHideNumbers]);
+
   return (
     <>
       <Grid container sx={{ my: '10px' }}>
+        <Grid alignItems='center' direction='column' item onClick={onHideClick} sx={{ cursor: 'pointer', display: 'flex', position: 'absolute', pt: '3px', right: '35px', top: '15px', opacity: 0.5, '&:hover': { opacity: 1 } }}>
+          {hideNumbers
+            ? <ShowIcon />
+            : <HideIcon />
+          }
+          <Typography sx={{ color: 'secondary.light', fontSize: '12px', fontWeight: 500 }}>
+            {hideNumbers ? t('Show numbers') : t('Hide numbers')}
+          </Typography>
+        </Grid>
         {isPasswordError &&
           <WrongPasswordAlert bgcolor={theme.palette.mode === 'dark' ? 'black' : 'white'} />
         }