feat(extension-chrome): use design system to simplify code

packages/extension-chrome/package.json

@@ -34,6 +34,7 @@
     "@chakra-ui/icons": "2.0.17",
     "@chakra-ui/react": "2.4.9",
     "@chakra-ui/theme-tools": "2.0.17",
+    "@chakra-ui/utils": "2.0.15",
     "@ckb-lumos/base": "0.20.0-alpha.2",
     "@ckb-lumos/bi": "0.20.0-alpha.2",
     "@ckb-lumos/codec": "0.20.0-alpha.2",

packages/extension-chrome/src/pages/Components/CircleMarker.tsx

@@ -0,0 +1,6 @@
+import { Box, BoxProps } from '@chakra-ui/react';
+import React, { FC } from 'react';
+
+export const CircleMarker: FC<BoxProps> = (props) => (
+  <Box as="span" w="20px" h="20px" borderRadius="50%" background="purple.500" {...props} />
+);

packages/extension-chrome/src/pages/Components/DialogFrame.tsx

@@ -28,13 +28,13 @@ export const DialogFrame: FC<DialogFrameProps> = ({ meta }) => {
   };
 
   return (
-    <Flex w="100vw" justifyContent="center" backgroundColor="purple.700">
+    <Flex w="100vw" justifyContent="center" backgroundColor="primary.darker">
       <Flex
         alignItems="center"
         direction="column"
         position="relative"
         maxW="500px"
-        pt={title ? '28px' : '44px'}
+        pt="32px"
         h="100vh"
         px="24px"
         pb="72px"

packages/extension-chrome/src/pages/Components/ProgressIndicator.tsx

@@ -0,0 +1,32 @@
+import { Box, BoxProps, HStack } from '@chakra-ui/react';
+import range from 'lodash.range';
+import React, { FC } from 'react';
+
+export type ProgressIndicatorProps = { total: number; current: number } & BoxProps;
+
+export const ProgressIndicator: FC<ProgressIndicatorProps> = ({ total, current, ...rest }) => {
+  const getIndicatorColor = (index: number) => {
+    if (index < current) {
+      return 'primary.lighter';
+    } else if (index > current) {
+      return 'gray.300';
+    }
+    return 'primary';
+  };
+  return (
+    <HStack spacing="12px" paddingY="4px" mb="48px">
+      {range(0, total).map((index) => (
+        <Box
+          transitionProperty="background"
+          transitionDuration="common"
+          key={index}
+          w="66px"
+          h="5px"
+          borderRadius="5px"
+          backgroundColor={getIndicatorColor(index)}
+          {...rest}
+        />
+      ))}
+    </HStack>
+  );
+};

packages/extension-chrome/src/pages/Components/ProgressSteps.tsx

@@ -0,0 +1,61 @@
+import { CheckCircleIcon } from '@chakra-ui/icons';
+import { Box, BoxProps, Grid, Icon, Text } from '@chakra-ui/react';
+import Steps from 'rc-steps';
+import { StepsProps } from 'rc-steps/lib/Steps';
+import React, { FC } from 'react';
+import StepProcessingIcon from './icons/StepProcessing.svg';
+import StepWaitingIcon from './icons/StepWaiting.svg';
+
+export type ProgressStepsProps = Pick<StepsProps, 'items' | 'current'> & BoxProps;
+const renderSingleStep: StepsProps['itemRender'] = ({ title, description, status }) => {
+  const icon = {
+    wait: <Icon as={StepWaitingIcon} w="24px" h="24px" />,
+    process: <Icon as={StepProcessingIcon} w="24px" h="24px" />,
+    finish: <CheckCircleIcon w="20px" h="20px" color="white" />,
+    error: <></>,
+  }[status ?? 'wait'];
+  return (
+    <Grid
+      sx={{
+        '&:last-child .rc-steps-item-tail': {
+          height: 0,
+          width: 0,
+          border: 'none',
+        },
+      }}
+      transitionDuration="common"
+      transitionProperty="opacity"
+      opacity={status === 'wait' ? 0.7 : 1}
+      color="white"
+      templateRows="auto"
+      templateColumns="24px auto"
+    >
+      <Box alignSelf="center" justifySelf="center">
+        {icon}
+      </Box>
+      <Text as={Box} ml="4px" alignSelf="center" fontWeight="semibold" fontSize="md">
+        {title}
+      </Text>
+      <Box
+        className="rc-steps-item-tail"
+        w="0"
+        alignSelf="center"
+        justifySelf="center"
+        h="43px"
+        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}
+      </Text>
+    </Grid>
+  );
+};
+
+export const ProgressSteps: FC<ProgressStepsProps> = (props) => {
+  return <Box as={Steps} direction="vertical" itemRender={renderSingleStep} {...props} />;
+};

packages/extension-chrome/src/pages/Components/SearchBar.tsx

@@ -0,0 +1,35 @@
+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' | 'value' | 'defaultValue';
+
+type SearchBarProps = Omit<InputGroupProps, InputPickedFields> & Pick<InputProps, InputPickedFields>;
+
+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">
+        <SearchIcon w="24px" h="24px" />
+      </Center>
+    </InputLeftElement>
+    <Input
+      h="60px"
+      fontSize="16px"
+      type="search"
+      background="transparent"
+      border="1px solid"
+      borderColor="white.300"
+      color="white"
+      pl="60px"
+      lineHeight="24px"
+      _hover={{ borderColor: 'white.700' }}
+      _focusVisible={{ borderColor: 'accent', borderWidth: '2px !important' }}
+      onChange={onChange}
+      onBlur={onBlur}
+      onFocus={onFocus}
+      value={value}
+      defaultValue={defaultValue}
+    />
+  </InputGroup>
+);

packages/extension-chrome/src/pages/Components/WhiteAlphaBox.tsx

@@ -5,7 +5,7 @@ import { Flex, FlexProps } from '@chakra-ui/react';
 export const WhiteAlphaBox: FC<FlexProps> = ({ children, sx, ...props }) => {
   return (
     <Flex
-      backgroundColor="whiteAlpha.200"
+      backgroundColor="white.200"
       w="452px"
       borderRadius="8px"
       sx={{

packages/extension-chrome/src/pages/Notification/containers/SignData/SignData.tsx

@@ -112,7 +112,7 @@ export const SignData: FC = () => {
               maxW="100%"
               overflow="hidden"
               whiteSpace="nowrap"
-              color="yellow.200"
+              color="accent"
               as={RouteLink}
               to="/sign-transaction/view-data"
               cursor="pointer"

packages/extension-chrome/src/pages/Notification/containers/SignTransaction.tsx

@@ -47,7 +47,7 @@ const CellCapacity: FC<{ capacity: string }> = ({ capacity }) => {
   return (
     <>
       {decimalPart ? (
-        <Tooltip hasArrow label={`${amount} CKB`}>
+        <Tooltip hasArrow placement="top" label={`${amount} CKB`}>
           <Box>
             ≈{integerPart}
             {' CKB'}
@@ -124,7 +124,7 @@ const TransactionIOList: FC<TransactionIOListProps> = ({ type, networkName, tx,
                   <Box w="60px" p="16px">
                     #{index + 1}
                   </Box>
-                  <Tooltip hasArrow label={addr}>
+                  <Tooltip hasArrow placement="top" label={addr}>
                     <Box p="16px">
                       {addr.slice(0, 5)}...{addr.slice(-4)}
                     </Box>
@@ -199,6 +199,7 @@ export const SignTransaction: FC = () => {
           mx="-4px"
           px="4px"
           overflow="auto"
+          maxH="420px"
         >
           <TransactionIOList networkName={networkName} type="inputs" tx={transactionQuery.data.tx} />
           <TransactionIOList networkName={networkName} type="outputs" tx={transactionQuery.data.tx} mt="12px" />

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} />

packages/extension-chrome/src/pages/Popup/containers/Home.tsx

@@ -67,10 +67,15 @@ export const Home: FC = () => {
     <Flex flexDir="column" h="100%">
       <ConnectStatusCard name={config?.nickname!} connected={connectedStatus} />
 
-      <WhiteAlphaBox direction="column" mt="20px">
+      <WhiteAlphaBox direction="column" mt="20px" overflow="hidden">
         {entries.map(({ title, icon, onClick, testId }) => (
           <Flex
             key={testId}
+            _hover={{
+              background: 'white.200',
+            }}
+            transitionProperty="common"
+            transitionDuration="normal"
             data-test-id={testId}
             as="button"
             alignItems="center"
@@ -79,7 +84,7 @@ export const Home: FC = () => {
             onClick={onClick}
             type="button"
           >
-            <Center mr="20px" w="48px" backgroundColor="whiteAlpha.300" h="48px" borderRadius="50%">
+            <Center mr="20px" w="48px" backgroundColor="white.300" h="48px" borderRadius="50%">
               {icon}
             </Center>
             <Box fontSize="md" fontWeight="semibold">

packages/extension-chrome/src/pages/Popup/containers/Network/EditNetwork.tsx

@@ -95,7 +95,7 @@ export const EditNetwork: FC<EditNetworkProps> = ({ mode }) => {
 
   return (
     <Flex direction="column" h="100%" as="form" onSubmit={onSubmit}>
-      <VStack as={WhiteAlphaBox} spacing="16px" p="35px 20px" direction="column">
+      <VStack as={WhiteAlphaBox} spacing="16px" p="16px 20px" direction="column">
         <FormControl>
           <FormLabel>Name</FormLabel>
           <Input {...register('name', { required: true })} name="name" />

packages/extension-chrome/src/pages/Popup/containers/Network/NetworkConfig.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { Flex, Spacer, Button, Radio, RadioGroup, Skeleton, Icon, useToast, VStack } from '@chakra-ui/react';
+import { Flex, Spacer, Button, Radio, RadioGroup, Skeleton, Icon, useToast } from '@chakra-ui/react';
 import { AddIcon, DeleteIcon } from '@chakra-ui/icons';
 import EditIcon from '../../../Components/icons/Edit.svg';
 import { useNavigate } from 'react-router-dom';
@@ -58,57 +58,63 @@ export const NetworkConfig: FC = () => {
 
   return (
     <Skeleton h="100%" as={Flex} flexDirection="column" alignItems="center" isLoaded={!!networks}>
-      <WhiteAlphaBox overflowY="auto" maxH="500px" p="20px">
-        <RadioGroup
-          value={currentNetwork}
-          data-test-id="networkRadio"
-          onChange={onToggle}
-          display="flex"
-          w="100%"
-          flexDirection="column"
-        >
-          <VStack spacing="16px" flexDir="column">
-            {networks?.map((network, index) => (
-              <Flex
-                sx={{
-                  '&:hover .operations': {
-                    opacity: 1,
-                  },
-                  '& .operations': {
-                    opacity: 0,
-                    '& svg': {
-                      cursor: 'pointer',
-                    },
-                  },
-                }}
-                key={network.id}
-                w="100%"
-                alignItems="center"
-                justifyContent="space-between"
-              >
-                <Radio data-test-id={`networkRadio[${index}]`} value={network.id}>
-                  {network.displayName}
-                </Radio>
-                <Spacer />
-                {!PERSIST_IDS.has(network.id) && (
-                  <Flex className="operations">
-                    <Icon as={EditIcon} onClick={gotoEdit(network.id)} w="20px" h="20px" mr="20px" />
-                    <DeleteIcon
-                      onClick={async () => {
-                        await removeNetworkMutation.mutateAsync(network.id);
-                        await configQuery.invalidate();
-                      }}
-                      w="20px"
-                      h="20px"
-                      color="white"
-                    />
-                  </Flex>
-                )}
+      <RadioGroup
+        as={WhiteAlphaBox}
+        maxH="562px"
+        overflow="auto"
+        value={currentNetwork}
+        data-test-id="networkRadio"
+        onChange={onToggle}
+        flexDirection="column"
+        py="8px"
+        display="grid"
+        gridAutoRows="40px"
+        gridTemplateRows="repeat(2, 40px)"
+      >
+        {networks?.map((network, index) => (
+          <Flex
+            sx={{
+              '&:hover .operations': {
+                opacity: 1,
+              },
+              '& .operations': {
+                opacity: 0,
+                '& svg': {
+                  cursor: 'pointer',
+                },
+              },
+            }}
+            _hover={{
+              backgroundColor: 'white.200',
+            }}
+            transitionProperty="common"
+            transitionDuration="normal"
+            key={network.id}
+            w="100%"
+            alignItems="center"
+            justifyContent="space-between"
+            px="20px"
+          >
+            <Radio flex="1" h="100%" data-test-id={`networkRadio[${index}]`} value={network.id}>
+              {network.displayName}
+            </Radio>
+            {!PERSIST_IDS.has(network.id) && (
+              <Flex className="operations">
+                <Icon as={EditIcon} onClick={gotoEdit(network.id)} w="20px" h="20px" mr="20px" />
+                <DeleteIcon
+                  onClick={async () => {
+                    await removeNetworkMutation.mutateAsync(network.id);
+                    await configQuery.invalidate();
+                  }}
+                  w="20px"
+                  h="20px"
+                  color="white"
+                />
               </Flex>
-            ))}
-          </VStack>
-        </RadioGroup>
-      </WhiteAlphaBox>
+            )}
+          </Flex>
+        ))}
+      </RadioGroup>
       <Spacer />
       <Button
         data-test-id="addNetwork"