Skip to content

Commit 6f3417f

Browse files
IronLu233IronLu233
committed
feat(extension-chrome): design system refactor
1 parent 6f865d3 commit 6f3417f

File tree

13 files changed

+247
-182
lines changed

13 files changed

+247
-182
lines changed

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Box, BoxProps, HStack } from '@chakra-ui/react';
2+
import range from 'lodash.range';
3+
import React, { FC } from 'react';
4+
5+
export type ProgressIndicatorProps = { total: number; current: number } & BoxProps;
6+
7+
export const ProcessIndicator: FC<ProgressIndicatorProps> = ({ total, current }) => {
8+
const getIndicatorColor = (index: number) => {
9+
if (index < current) {
10+
return 'primary.lighter';
11+
} else if (index > current) {
12+
return 'gray.300';
13+
}
14+
return 'primary';
15+
};
16+
return (
17+
<HStack spacing="12px" paddingY="4px" mb="48px">
18+
{range(0, total).map((index) => (
19+
<Box
20+
transitionProperty="background"
21+
transitionDuration="common"
22+
key={index}
23+
w="66px"
24+
h="5px"
25+
borderRadius="5px"
26+
backgroundColor={getIndicatorColor(index)}
27+
/>
28+
))}
29+
</HStack>
30+
);
31+
};

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { CheckCircleIcon } from '@chakra-ui/icons';
2+
import { Box, BoxProps, Grid, Icon, Text } from '@chakra-ui/react';
3+
import Steps from 'rc-steps';
4+
import { StepsProps } from 'rc-steps/lib/Steps';
5+
import React, { FC } from 'react';
6+
import StepProcessingIcon from './icons/StepProcessing.svg';
7+
import StepWaitingIcon from './icons/StepWaiting.svg';
8+
9+
export type ProgressStepsProps = Pick<StepsProps, 'items' | 'current'> & BoxProps;
10+
const renderSingleStep: StepsProps['itemRender'] = ({ title, description, status }) => {
11+
const icon = {
12+
wait: <Icon as={StepWaitingIcon} w="24px" h="24px" />,
13+
process: <Icon as={StepProcessingIcon} w="24px" h="24px" />,
14+
finish: <CheckCircleIcon w="20px" h="20px" color="white" />,
15+
error: <></>,
16+
}[status ?? 'wait'];
17+
return (
18+
<Grid
19+
sx={{
20+
'&:last-child .rc-steps-item-tail': {
21+
height: 0,
22+
width: 0,
23+
border: 'none',
24+
},
25+
}}
26+
opacity={status === 'wait' ? 0.7 : 1}
27+
color="white"
28+
templateRows="auto"
29+
templateColumns="24px auto"
30+
>
31+
<Box alignSelf="center" justifySelf="center">
32+
{icon}
33+
</Box>
34+
<Text as={Box} ml="4px" alignSelf="center" fontWeight="semibold" fontSize="md">
35+
{title}
36+
</Text>
37+
<Box
38+
className="rc-steps-item-tail"
39+
w="0"
40+
alignSelf="center"
41+
justifySelf="center"
42+
h="43px"
43+
border="1px solid white"
44+
borderRadius="2px"
45+
my="1px"
46+
/>
47+
<Text as={Box} lineHeight="4" ml="8px" fontSize="sm">
48+
{description}
49+
</Text>
50+
</Grid>
51+
);
52+
};
53+
54+
export const ProgressSteps: FC<ProgressStepsProps> = (props) => {
55+
return <Box as={Steps} direction="vertical" itemRender={renderSingleStep} {...props} />;
56+
};

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { SearchIcon } from '@chakra-ui/icons';
2+
import { Center, Input, InputGroup, InputGroupProps, InputLeftElement, InputProps } from '@chakra-ui/react';
3+
import React, { FC } from 'react';
4+
5+
type InputPickedFields = 'onChange' | 'onBlur' | 'onFocus' | 'onClick' | 'value' | 'defaultValue';
6+
7+
type SearchBarProps = Omit<InputGroupProps, InputPickedFields> & Pick<InputProps, InputPickedFields>;
8+
9+
export const SearchBar: FC<SearchBarProps> = ({ onChange, onBlur, onFocus, onClick, value, defaultValue, ...rest }) => (
10+
<InputGroup w="100%" {...rest}>
11+
<InputLeftElement h="100%" px="8px" w="60px">
12+
<Center w="40px" h="40px" bg="white.300" borderRadius="8px">
13+
<SearchIcon w="24px" h="24px" />
14+
</Center>
15+
</InputLeftElement>
16+
<Input
17+
h="60px"
18+
fontSize="16px"
19+
type="search"
20+
background="transparent"
21+
border="1px solid"
22+
borderColor="white.300"
23+
color="white"
24+
pl="60px"
25+
lineHeight="24px"
26+
_hover={{ borderColor: 'white.700' }}
27+
_focusVisible={{ borderColor: 'accent', borderWidth: '2px !important' }}
28+
onChange={onChange}
29+
onBlur={onBlur}
30+
onFocus={onFocus}
31+
onClick={onClick}
32+
value={value}
33+
defaultValue={defaultValue}
34+
/>
35+
</InputGroup>
36+
);

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -199,6 +199,7 @@ export const SignTransaction: FC = () => {
199199
mx="-4px"
200200
px="4px"
201201
overflow="auto"
202+
maxH="420px"
202203
>
203204
<TransactionIOList networkName={networkName} type="inputs" tx={transactionQuery.data.tx} />
204205
<TransactionIOList networkName={networkName} type="outputs" tx={transactionQuery.data.tx} mt="12px" />

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export const EditNetwork: FC<EditNetworkProps> = ({ mode }) => {
9595

9696
return (
9797
<Flex direction="column" h="100%" as="form" onSubmit={onSubmit}>
98-
<VStack as={WhiteAlphaBox} spacing="16px" p="35px 20px" direction="column">
98+
<VStack as={WhiteAlphaBox} spacing="16px" p="16px 20px" direction="column">
9999
<FormControl>
100100
<FormLabel>Name</FormLabel>
101101
<Input {...register('name', { required: true })} name="name" />

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

Lines changed: 48 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { FC } from 'react';
2-
import { Flex, Spacer, Button, Radio, RadioGroup, Skeleton, Icon, useToast, Grid } from '@chakra-ui/react';
2+
import { Flex, Spacer, Button, Radio, RadioGroup, Skeleton, Icon, useToast } from '@chakra-ui/react';
33
import { AddIcon, DeleteIcon } from '@chakra-ui/icons';
44
import EditIcon from '../../../Components/icons/Edit.svg';
55
import { useNavigate } from 'react-router-dom';
@@ -58,61 +58,62 @@ export const NetworkConfig: FC = () => {
5858

5959
return (
6060
<Skeleton h="100%" as={Flex} flexDirection="column" alignItems="center" isLoaded={!!networks}>
61-
{/* <WhiteAlphaBox overflowY="auto" maxH="500px" p="20px"> */}
6261
<RadioGroup
6362
as={WhiteAlphaBox}
63+
maxH="562px"
64+
overflow="auto"
6465
value={currentNetwork}
6566
data-test-id="networkRadio"
6667
onChange={onToggle}
67-
display="flex"
6868
flexDirection="column"
6969
py="8px"
70+
display="grid"
71+
gridAutoRows="40px"
72+
gridTemplateRows="repeat(2, 40px)"
7073
>
71-
<Grid autoRows="40px" gridTemplateRows="repeat(2, 40px)" flexDir="column">
72-
{networks?.map((network, index) => (
73-
<Flex
74-
sx={{
75-
'&:hover .operations': {
76-
opacity: 1,
74+
{networks?.map((network, index) => (
75+
<Flex
76+
sx={{
77+
'&:hover .operations': {
78+
opacity: 1,
79+
},
80+
'& .operations': {
81+
opacity: 0,
82+
'& svg': {
83+
cursor: 'pointer',
7784
},
78-
'& .operations': {
79-
opacity: 0,
80-
'& svg': {
81-
cursor: 'pointer',
82-
},
83-
},
84-
}}
85-
_hover={{
86-
backgroundColor: 'white.200',
87-
}}
88-
transitionProperty="common"
89-
transitionDuration="normal"
90-
key={network.id}
91-
w="100%"
92-
alignItems="center"
93-
justifyContent="space-between"
94-
px="20px"
95-
>
96-
<Radio flex="1" h="100%" data-test-id={`networkRadio[${index}]`} value={network.id}>
97-
{network.displayName}
98-
</Radio>
99-
{!PERSIST_IDS.has(network.id) && (
100-
<Flex className="operations">
101-
<Icon as={EditIcon} onClick={gotoEdit(network.id)} w="20px" h="20px" mr="20px" />
102-
<DeleteIcon
103-
onClick={async () => {
104-
await removeNetworkMutation.mutateAsync(network.id);
105-
await configQuery.invalidate();
106-
}}
107-
w="20px"
108-
h="20px"
109-
color="white"
110-
/>
111-
</Flex>
112-
)}
113-
</Flex>
114-
))}
115-
</Grid>
85+
},
86+
}}
87+
_hover={{
88+
backgroundColor: 'white.200',
89+
}}
90+
transitionProperty="common"
91+
transitionDuration="normal"
92+
key={network.id}
93+
w="100%"
94+
alignItems="center"
95+
justifyContent="space-between"
96+
px="20px"
97+
>
98+
<Radio flex="1" h="100%" data-test-id={`networkRadio[${index}]`} value={network.id}>
99+
{network.displayName}
100+
</Radio>
101+
{!PERSIST_IDS.has(network.id) && (
102+
<Flex className="operations">
103+
<Icon as={EditIcon} onClick={gotoEdit(network.id)} w="20px" h="20px" mr="20px" />
104+
<DeleteIcon
105+
onClick={async () => {
106+
await removeNetworkMutation.mutateAsync(network.id);
107+
await configQuery.invalidate();
108+
}}
109+
w="20px"
110+
h="20px"
111+
color="white"
112+
/>
113+
</Flex>
114+
)}
115+
</Flex>
116+
))}
116117
</RadioGroup>
117118
{/* </WhiteAlphaBox> */}
118119
<Spacer />

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

Lines changed: 5 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,13 @@
11
import React, { FC, useMemo, useState } from 'react';
2-
import {
3-
Flex,
4-
Center,
5-
Box,
6-
Text,
7-
Input,
8-
InputGroup,
9-
InputLeftElement,
10-
Highlight,
11-
Skeleton,
12-
useToast,
13-
Grid,
14-
} from '@chakra-ui/react';
15-
import { DeleteIcon, SearchIcon } from '@chakra-ui/icons';
2+
import { Flex, Center, Box, Text, Highlight, Skeleton, useToast, Grid } from '@chakra-ui/react';
3+
import { DeleteIcon } from '@chakra-ui/icons';
164
import { useMutation } from '@tanstack/react-query';
175

186
import { WhiteAlphaBox } from '../../Components/WhiteAlphaBox';
197
import { useConfigQuery } from '../../hooks/useConfigQuery';
208
import { useService } from '../../hooks/useService';
219
import { SiteFavicon } from '../../Components/SiteFavicon';
10+
import { SearchBar } from '../../Components/SearchBar';
2211

2312
export const WhitelistSites: FC = () => {
2413
const configQuery = useConfigQuery();
@@ -53,34 +42,9 @@ export const WhitelistSites: FC = () => {
5342
<Text as={Box} fontSize="md" mb="24px" w="100%">
5443
{configQuery.data?.nickname} is connected to these sites. They can view your account address
5544
</Text>
56-
<InputGroup alignItems="center" h="60px" mb="24px">
57-
<InputLeftElement
58-
borderRadius="8px"
59-
top="10px"
60-
left="6px"
61-
w="40px"
62-
h="40px"
63-
backgroundColor="purple.500"
64-
as={Center}
65-
>
66-
<SearchIcon w="24px" h="24px" />
67-
</InputLeftElement>
68-
<Input
69-
data-test-id="siteSearch"
70-
size="lg"
71-
w="452px"
72-
background="transparent"
73-
borderColor="white.300"
74-
borderWidth="1px !important"
75-
color="white"
76-
onChange={(e) => setSearchQuery(e.target.value)}
77-
value={searchQuery}
78-
h="60px"
79-
pl="48px"
80-
/>
81-
</InputGroup>
45+
<SearchBar mb="24px" onChange={(e) => setSearchQuery(e.target.value)} value={searchQuery} />
8246
{!filteredSites?.length ? (
83-
<Center as={WhiteAlphaBox} data-test-id="siteList" h="288px">
47+
<Center as={WhiteAlphaBox} data-test-id="siteList" h="268px">
8448
<Box color="whiteAlpha.700" height="20px" fontSize="sm">
8549
No whitelist sites found.
8650
</Box>

0 commit comments

Comments
 (0)