feat(extension-chrome): design system refactor

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

@@ -0,0 +1,31 @@
+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 ProcessIndicator: FC<ProgressIndicatorProps> = ({ total, current }) => {
+  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)}
+        />
+      ))}
+    </HStack>
+  );
+};

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

@@ -0,0 +1,56 @@
+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',
+        },
+      }}
+      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"
+      />
+      <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,36 @@
+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 SearchBarProps = Omit<InputGroupProps, InputPickedFields> & Pick<InputProps, InputPickedFields>;
+
+export const SearchBar: FC<SearchBarProps> = ({ onChange, onBlur, onFocus, onClick, 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}
+      onClick={onClick}
+      value={value}
+      defaultValue={defaultValue}
+    />
+  </InputGroup>
+);

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

@@ -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/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, Grid } 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,61 +58,62 @@ export const NetworkConfig: FC = () => {
 
   return (
     <Skeleton h="100%" as={Flex} flexDirection="column" alignItems="center" isLoaded={!!networks}>
-      {/* <WhiteAlphaBox overflowY="auto" maxH="500px" p="20px"> */}
       <RadioGroup
         as={WhiteAlphaBox}
+        maxH="562px"
+        overflow="auto"
         value={currentNetwork}
         data-test-id="networkRadio"
         onChange={onToggle}
-        display="flex"
         flexDirection="column"
         py="8px"
+        display="grid"
+        gridAutoRows="40px"
+        gridTemplateRows="repeat(2, 40px)"
       >
-        <Grid autoRows="40px" gridTemplateRows="repeat(2, 40px)" flexDir="column">
-          {networks?.map((network, index) => (
-            <Flex
-              sx={{
-                '&:hover .operations': {
-                  opacity: 1,
+        {networks?.map((network, index) => (
+          <Flex
+            sx={{
+              '&:hover .operations': {
+                opacity: 1,
+              },
+              '& .operations': {
+                opacity: 0,
+                '& svg': {
+                  cursor: 'pointer',
                 },
-                '& .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>
-              )}
-            </Flex>
-          ))}
-        </Grid>
+              },
+            }}
+            _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>
+            )}
+          </Flex>
+        ))}
       </RadioGroup>
       {/* </WhiteAlphaBox> */}
       <Spacer />

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

@@ -1,24 +1,13 @@
 import React, { FC, useMemo, useState } from 'react';
-import {
-  Flex,
-  Center,
-  Box,
-  Text,
-  Input,
-  InputGroup,
-  InputLeftElement,
-  Highlight,
-  Skeleton,
-  useToast,
-  Grid,
-} from '@chakra-ui/react';
-import { DeleteIcon, SearchIcon } from '@chakra-ui/icons';
+import { Flex, Center, Box, Text, Highlight, Skeleton, useToast, Grid } from '@chakra-ui/react';
+import { DeleteIcon } from '@chakra-ui/icons';
 import { useMutation } from '@tanstack/react-query';
 
 import { WhiteAlphaBox } from '../../Components/WhiteAlphaBox';
 import { useConfigQuery } from '../../hooks/useConfigQuery';
 import { useService } from '../../hooks/useService';
 import { SiteFavicon } from '../../Components/SiteFavicon';
+import { SearchBar } from '../../Components/SearchBar';
 
 export const WhitelistSites: FC = () => {
   const configQuery = useConfigQuery();
@@ -53,34 +42,9 @@ export const WhitelistSites: FC = () => {
       <Text as={Box} fontSize="md" mb="24px" w="100%">
         {configQuery.data?.nickname} is connected to these sites. They can view your account address
       </Text>
-      <InputGroup alignItems="center" h="60px" mb="24px">
-        <InputLeftElement
-          borderRadius="8px"
-          top="10px"
-          left="6px"
-          w="40px"
-          h="40px"
-          backgroundColor="purple.500"
-          as={Center}
-        >
-          <SearchIcon w="24px" h="24px" />
-        </InputLeftElement>
-        <Input
-          data-test-id="siteSearch"
-          size="lg"
-          w="452px"
-          background="transparent"
-          borderColor="white.300"
-          borderWidth="1px !important"
-          color="white"
-          onChange={(e) => setSearchQuery(e.target.value)}
-          value={searchQuery}
-          h="60px"
-          pl="48px"
-        />
-      </InputGroup>
+      <SearchBar mb="24px" onChange={(e) => setSearchQuery(e.target.value)} value={searchQuery} />
       {!filteredSites?.length ? (
-        <Center as={WhiteAlphaBox} data-test-id="siteList" h="288px">
+        <Center as={WhiteAlphaBox} data-test-id="siteList" h="268px">
           <Box color="whiteAlpha.700" height="20px" fontSize="sm">
             No whitelist sites found.
           </Box>