feat(extension-chrome): modify code after code review

IronLu233 · IronLu233 · commit c3911b724d2e · 2023-04-11T19:27:10.000+08:00
diff --git a/packages/extension-chrome/src/pages/Components/ProgressIndicator.tsx b/packages/extension-chrome/src/pages/Components/ProgressIndicator.tsx
@@ -4,7 +4,7 @@ import React, { FC } from 'react';
 
 export type ProgressIndicatorProps = { total: number; current: number } & BoxProps;
 
-export const ProcessIndicator: FC<ProgressIndicatorProps> = ({ total, current }) => {
+export const ProgressIndicator: FC<ProgressIndicatorProps> = ({ total, current, ...rest }) => {
   const getIndicatorColor = (index: number) => {
     if (index < current) {
       return 'primary.lighter';
@@ -24,6 +24,7 @@ export const ProcessIndicator: FC<ProgressIndicatorProps> = ({ total, current })
           h="5px"
           borderRadius="5px"
           backgroundColor={getIndicatorColor(index)}
+          {...rest}
         />
       ))}
     </HStack>
diff --git a/packages/extension-chrome/src/pages/Components/ProgressSteps.tsx b/packages/extension-chrome/src/pages/Components/ProgressSteps.tsx
@@ -23,6 +23,8 @@ const renderSingleStep: StepsProps['itemRender'] = ({ title, description, status
           border: 'none',
         },
       }}
+      transitionDuration="common"
+      transitionProperty="opacity"
       opacity={status === 'wait' ? 0.7 : 1}
       color="white"
       templateRows="auto"
@@ -43,6 +45,9 @@ const renderSingleStep: StepsProps['itemRender'] = ({ title, description, status
         border="1px solid white"
         borderRadius="2px"
         my="1px"
+        transitionDuration="common"
+        transitionProperty="opacity"
+        opacity={status === 'finish' ? 1 : 0.7}
       />
       <Text as={Box} lineHeight="4" ml="8px" fontSize="sm">
         {description}
diff --git a/packages/extension-chrome/src/pages/Components/SearchBar.tsx b/packages/extension-chrome/src/pages/Components/SearchBar.tsx
@@ -2,11 +2,11 @@ import { SearchIcon } from '@chakra-ui/icons';
 import { Center, Input, InputGroup, InputGroupProps, InputLeftElement, InputProps } from '@chakra-ui/react';
 import React, { FC } from 'react';
 
-type InputPickedFields = 'onChange' | 'onBlur' | 'onFocus' | 'onClick' | 'value' | 'defaultValue';
+type InputPickedFields = 'onChange' | 'onBlur' | 'onFocus' | 'value' | 'defaultValue';
 
 type SearchBarProps = Omit<InputGroupProps, InputPickedFields> & Pick<InputProps, InputPickedFields>;
 
-export const SearchBar: FC<SearchBarProps> = ({ onChange, onBlur, onFocus, onClick, value, defaultValue, ...rest }) => (
+export const SearchBar: FC<SearchBarProps> = ({ onChange, onBlur, onFocus, value, defaultValue, ...rest }) => (
   <InputGroup w="100%" {...rest}>
     <InputLeftElement h="100%" px="8px" w="60px">
       <Center w="40px" h="40px" bg="white.300" borderRadius="8px">
@@ -28,7 +28,6 @@ export const SearchBar: FC<SearchBarProps> = ({ onChange, onBlur, onFocus, onCli
       onChange={onChange}
       onBlur={onBlur}
       onFocus={onFocus}
-      onClick={onClick}
       value={value}
       defaultValue={defaultValue}
     />
diff --git a/packages/extension-chrome/src/pages/Notification/index.tsx b/packages/extension-chrome/src/pages/Notification/index.tsx
@@ -62,7 +62,6 @@ const router = createHashRouter(routes);
 
 const App = () => {
   return (
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     <ChakraProvider theme={solidBackgroundTheme}>
       <QueryClientProvider client={queryClient}>
         <RouterProvider router={router} />
diff --git a/packages/extension-chrome/src/pages/Popup/containers/Network/NetworkConfig.tsx b/packages/extension-chrome/src/pages/Popup/containers/Network/NetworkConfig.tsx
@@ -115,7 +115,6 @@ export const NetworkConfig: FC = () => {
           </Flex>
         ))}
       </RadioGroup>
-      {/* </WhiteAlphaBox> */}
       <Spacer />
       <Button
         data-test-id="addNetwork"
diff --git a/packages/extension-chrome/src/pages/Popup/index.tsx b/packages/extension-chrome/src/pages/Popup/index.tsx
@@ -82,7 +82,6 @@ const App: FC = () => {
 
   return (
     <React.StrictMode>
-      {/* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */}
       <ChakraProvider theme={solidBackgroundTheme}>
         <QueryClientProvider client={queryClient}>
           <RouterProvider router={hashRouter} />
diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/BeforeStart.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/BeforeStart.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { Card, ListItem, Heading, Text, UnorderedList, ListIcon, Button, Center } from '@chakra-ui/react';
+import { Card, ListItem, Heading, Text, UnorderedList, ListIcon, Button, Center, Box } from '@chakra-ui/react';
 import { useNavigate } from 'react-router-dom';
 import { CircleMarker } from '../../Components/CircleMarker';
 
@@ -12,14 +12,12 @@ const texts = [
 export const BeforeStart: FC = () => {
   const navigate = useNavigate();
   return (
-    <Center flexDir="column">
+    <Box flexDir="column" w="568px">
       <Heading mb="48px" fontSize="4xl" fontWeight="semibold">
         Before We Start
       </Heading>
-      <Text fontSize="16px" w="568px">
-        We want you to know that we prioritize your privacy:
-      </Text>
-      <Card borderRadius="8px" my="12px" w="568px" p="20px">
+      <Text fontSize="16px">We want you to know that we prioritize your privacy:</Text>
+      <Card borderRadius="8px" my="12px" p="20px">
         <UnorderedList spacing="12px" ml="0">
           {texts.map((t) => (
             <ListItem display="flex" fontSize="md" key={t}>
@@ -29,20 +27,22 @@ export const BeforeStart: FC = () => {
           ))}
         </UnorderedList>
       </Card>
-      <Text w="568px" fontSize="16px" mb="72px">
+      <Text fontSize="16px" mb="72px">
         We are not in the information collection business (even anonymous data).
       </Text>
 
-      <Button
-        onClick={() => {
-          navigate('/create/account');
-        }}
-        data-test-id="getStarted"
-        size="lg"
-        w="148px"
-      >
-        Get Started
-      </Button>
-    </Center>
+      <Center>
+        <Button
+          onClick={() => {
+            navigate('/create/account');
+          }}
+          data-test-id="getStarted"
+          size="lg"
+          w="148px"
+        >
+          Get Started
+        </Button>
+      </Center>
+    </Box>
   );
 };
diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/ConfirmMnemonic.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/ConfirmMnemonic.tsx
@@ -65,19 +65,19 @@ export const ConfirmMnemonic: FC = () => {
   }, [isAllCorrect, setNextAvailable]);
 
   return (
-    <Center w="480px" flexDir="column">
+    <Box w="480px" flexDir="column">
       <Heading mb="48px" lineHeight="111%" fontWeight="semibold">
         Confirm your Seed
       </Heading>
-      <Box fontSize="md" w="480px" mb="8px">
+      <Box fontSize="md" mb="8px">
         Please select words in correct order to form your seed.
       </Box>
 
-      <Textarea data-test-id="selectedSeed" as="div" p="16px" w="480px" h="200px">
+      <Textarea data-test-id="selectedSeed" as="div" p="16px" h="200px">
         {wordElements}
       </Textarea>
 
-      <SimpleGrid spacing="12px" marginTop="32px" columns={4} w="480px">
+      <SimpleGrid spacing="12px" marginTop="32px" columns={4}>
         {word4Choose.map((word, index) => {
           const chosenOrder = chosenIndex.findIndex((i) => i === index);
           const hasChosen = chosenOrder !== -1;
@@ -115,6 +115,6 @@ export const ConfirmMnemonic: FC = () => {
           );
         })}
       </SimpleGrid>
-    </Center>
+    </Box>
   );
 };
diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/CreateProcessFrame.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/CreateProcessFrame.tsx
@@ -11,7 +11,7 @@ import {
 import { Logo } from '../../Components/Logo';
 import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
 import { CreateFlowConfig } from '../types';
-import { ProcessIndicator } from '../../Components/ProgressLine';
+import { ProgressIndicator } from '../../Components/ProgressIndicator';
 import { ProgressSteps } from '../../Components/ProgressSteps';
 
 export type OutletContext = {
@@ -115,7 +115,7 @@ export const CreateProcessFrame: FC = () => {
           </Button>
         </HStack>
 
-        <ProcessIndicator total={flowPaths.length} current={currentPathIndex} />
+        <ProgressIndicator total={flowPaths.length} current={currentPathIndex} />
       </Flex>
     </Flex>
   );
diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/NewMnemonic.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/NewMnemonic.tsx
@@ -11,7 +11,6 @@ import {
   Flex,
   Text,
   useToast,
-  Center,
   List,
   ListItem,
   ListIcon,
@@ -47,7 +46,7 @@ export const CreateMnemonic: FC = () => {
   }, [mnemonic, clipboard, setWalletStore]);
 
   return (
-    <Center flexDir="column" w="532px">
+    <Box w="532px">
       <Heading mb="48px" lineHeight="111%" fontWeight="semibold">
         Generate Wallet Seed
       </Heading>
@@ -92,16 +91,6 @@ export const CreateMnemonic: FC = () => {
           </Box>
         </ListItem>
       </List>
-      {/* <Flex>
-        <ListMarker />
-        <Text w="100%" fontSize="md" mt="-2px">
-          Store this Seed in a password manager like 1Password.
-          <br />
-          <br />
-          Please write this Seed on a piece of paper and store in a secure location. If you want even stronger security,
-          write it down on multiple pieces of paper and store them in at least 2-3 different locations.
-        </Text>
-      </Flex> */}
-    </Center>
+    </Box>
   );
 };
diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/Password.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/Password.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useEffect } from 'react';
-import { FormControl, FormLabel, Input, Heading, VStack, Box, FormErrorMessage, Center } from '@chakra-ui/react';
+import { FormControl, FormLabel, Input, Heading, VStack, Box, FormErrorMessage } from '@chakra-ui/react';
 import { Controller, useForm } from 'react-hook-form';
 
 import { useWalletCreationStore } from '../store';
@@ -42,7 +42,7 @@ export const SetPassword: FC<SetPasswordProps> = ({ isImportSeed }) => {
   }, [setNextAvailable, formState]);
 
   return (
-    <Center flexDir="column">
+    <Box>
       <Heading mb="48px" lineHeight="111%" fontWeight="semibold">
         Create password
       </Heading>
@@ -121,6 +121,6 @@ export const SetPassword: FC<SetPasswordProps> = ({ isImportSeed }) => {
             </Checkbox>
           </FormControl> */}
       </VStack>
-    </Center>
+    </Box>
   );
 };
diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/RecoveryWallet.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/RecoveryWallet.tsx
@@ -13,7 +13,6 @@ import {
   InputProps,
   InputGroup,
   InputRightElement,
-  Center,
 } from '@chakra-ui/react';
 import times from 'lodash.times';
 import React, { useCallback, useEffect, useRef } from 'react';
@@ -142,7 +141,7 @@ export const RecoveryWallet: FC = () => {
   });
 
   return (
-    <Center flexDir="column" w="672px">
+    <Box w="672px">
       <Heading fontWeight="semibold" lineHeight="111%" mb="48px">
         Access Wallet With Your Seed
       </Heading>
@@ -159,7 +158,7 @@ export const RecoveryWallet: FC = () => {
         <AlertDescription fontSize="md">You can paste your entire Seed into any field</AlertDescription>
       </Alert>
       <Box display="grid">
-        <Grid templateColumns="repeat(3, 1fr)" column={3} gap="12px">
+        <Grid gridTemplate="repeat(4, 1fr) / repeat(3, 1fr)" column={3} gap="12px">
           {inputs}
         </Grid>
       </Box>
@@ -182,6 +181,6 @@ export const RecoveryWallet: FC = () => {
           );
         }}
       />
-    </Center>
+    </Box>
   );
 };
diff --git a/packages/extension-chrome/src/pages/theme/Input.ts b/packages/extension-chrome/src/pages/theme/Input.ts
@@ -1,6 +1,6 @@
 import { inputAnatomy } from '@chakra-ui/anatomy';
 import { createMultiStyleConfigHelpers } from '@chakra-ui/react';
-import { getColor } from '@chakra-ui/theme-tools';
+import { getColor } from './utils';
 
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(inputAnatomy.keys);
 
@@ -15,18 +15,12 @@ const primary = definePartsStyle(({ theme }) => ({
     },
 
     _invalid: {
+      borderWidth: '2px',
       borderColor: `${getColor(theme, 'error.darker')} !important`,
-      boxShadow: 'none !important',
     },
     _focusVisible: {
       borderWidth: '2px',
       borderColor: 'primary',
-      boxShadow: `0 0 0 1px ${getColor(theme, 'primary')}`,
-    },
-  },
-  element: {
-    _invalid: {
-      color: 'error.darker',
     },
   },
 }));
@@ -40,13 +34,12 @@ const accent = definePartsStyle(({ theme }) => ({
       borderColor: 'white.700',
     },
     _invalid: {
+      borderWidth: '2px',
       borderColor: `${getColor(theme, 'error.lighter')} !important`,
-      boxShadow: 'none !important',
     },
     _focusVisible: {
       borderWidth: '2px',
       borderColor: 'accent',
-      boxShadow: `0 0 0 1px ${getColor(theme, 'accent')}`,
     },
   },
   element: {
diff --git a/packages/extension-chrome/src/pages/theme/Radio.ts b/packages/extension-chrome/src/pages/theme/Radio.ts
@@ -11,7 +11,6 @@ export const Radio = defineMultiStyleConfig({
         transitionProperty: 'border',
         transitionDuration: 'normal',
 
-        boxShadow: 'none !important',
         _checked: {
           borderColor: colorScheme,
           borderWidth,
diff --git a/packages/extension-chrome/src/pages/theme/index.ts b/packages/extension-chrome/src/pages/theme/index.ts
@@ -21,7 +21,7 @@ export const theme = extendTheme(
       'primary.lighter': '#B794F4',
       'primary.darker': '#553C9A',
 
-      'info.darker': '#718096',
+      'info.darker': '#3182CE',
       'info.lighter': '#63B3ED',
       'info.bg': '#BEE3F8',
 
@@ -59,9 +59,6 @@ export const theme = extendTheme(
       'gray.100': '#EDF2F7',
       'gray.50': '#F7FAFC',
     },
-    symantecTokens: {
-      'transaction.normal': 'var(--chakra-transition-property-normal) var(--chakra-transition-duration-normal)',
-    },
   },
   {
     components: {
