From 5246af15f2d520cb800af82c99e6e42fb4f095b9 Mon Sep 17 00:00:00 2001 From: IronLu233 Date: Fri, 7 Apr 2023 16:43:44 +0800 Subject: [PATCH 1/7] feat(extension-chrome): use design system --- .../src/pages/Components/DialogFrame.tsx | 2 +- .../src/pages/Components/ListMarker.tsx | 6 +++++ .../WalletManager/containers/BeforeStart.tsx | 7 +++--- .../containers/CreateAccount.tsx | 2 +- .../containers/CreateProcessFrame.tsx | 24 +++++++++++-------- .../src/pages/theme/FormLabel.ts | 2 +- 6 files changed, 26 insertions(+), 17 deletions(-) create mode 100644 packages/extension-chrome/src/pages/Components/ListMarker.tsx diff --git a/packages/extension-chrome/src/pages/Components/DialogFrame.tsx b/packages/extension-chrome/src/pages/Components/DialogFrame.tsx index be08e97b..275179d3 100644 --- a/packages/extension-chrome/src/pages/Components/DialogFrame.tsx +++ b/packages/extension-chrome/src/pages/Components/DialogFrame.tsx @@ -28,7 +28,7 @@ export const DialogFrame: FC = ({ meta }) => { }; return ( - + = (props) => ( + +); diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/BeforeStart.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/BeforeStart.tsx index 3c31f371..9f63fc51 100644 --- a/packages/extension-chrome/src/pages/WalletManager/containers/BeforeStart.tsx +++ b/packages/extension-chrome/src/pages/WalletManager/containers/BeforeStart.tsx @@ -1,8 +1,7 @@ import React, { FC } from 'react'; -import { Card, Box, ListItem, Heading, Text, UnorderedList, ListIcon, Button } from '@chakra-ui/react'; +import { Card, ListItem, Heading, Text, UnorderedList, ListIcon, Button } from '@chakra-ui/react'; import { useNavigate } from 'react-router-dom'; - -const Marker: FC = (props) => ; +import { Marker } from '../../Components/ListMarker'; const texts = [ 'We do not send any clicks, page views or events to a central server', @@ -21,7 +20,7 @@ export const BeforeStart: FC = () => { We want you to know that we prioritize your privacy: - + {texts.map((t) => ( diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/CreateAccount.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/CreateAccount.tsx index 3ae8b993..df04d040 100644 --- a/packages/extension-chrome/src/pages/WalletManager/containers/CreateAccount.tsx +++ b/packages/extension-chrome/src/pages/WalletManager/containers/CreateAccount.tsx @@ -46,7 +46,7 @@ export const CreateAccount: FC<{ isImportSeed?: boolean }> = ({ isImportSeed }) render={({ fieldState, field }) => ( A Descriptive Name For Your Wallet - + {fieldState.error?.message} )} diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/CreateProcessFrame.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/CreateProcessFrame.tsx index 0feb683c..ed2d27e4 100644 --- a/packages/extension-chrome/src/pages/WalletManager/containers/CreateProcessFrame.tsx +++ b/packages/extension-chrome/src/pages/WalletManager/containers/CreateProcessFrame.tsx @@ -18,16 +18,18 @@ import Steps from 'rc-steps'; import { StepsProps } from 'rc-steps/lib/Steps'; const ProcessIndicator: FC<{ total: number; current: number } & FlexProps> = ({ total, current }) => { + const getIndicatorColor = (index: number) => { + if (index < current) { + return 'primary.lighter'; + } else if (index > current) { + return 'gray.300'; + } + return 'primary'; + }; return ( {range(0, total).map((index) => ( - + ))} ); @@ -37,7 +39,7 @@ const renderSingleStep: StepsProps['itemRender'] = ({ title, description, status const icon = { wait: , process: , - finish: , + finish: , error: <>, }[status ?? 'wait']; return ( @@ -53,7 +55,9 @@ const renderSingleStep: StepsProps['itemRender'] = ({ title, description, status templateRows="auto" templateColumns="24px auto" > - {icon} + + {icon} + {title} @@ -142,7 +146,7 @@ export const CreateProcessFrame: FC = () => { alignItems="center" pl="80px" position="relative" - backgroundColor="purple.700" + backgroundColor="primary.darker" height="100vh" > diff --git a/packages/extension-chrome/src/pages/theme/FormLabel.ts b/packages/extension-chrome/src/pages/theme/FormLabel.ts index d23efafa..7297690f 100644 --- a/packages/extension-chrome/src/pages/theme/FormLabel.ts +++ b/packages/extension-chrome/src/pages/theme/FormLabel.ts @@ -4,7 +4,7 @@ export const FormLabel = defineStyle({ baseStyle: { fontSize: '14px', height: '20px', - fontWeight: 600, + fontWeight: 400, mb: '4px', }, }); From 9086ca81b2b9b0642956f1ad1300bc34002cb520 Mon Sep 17 00:00:00 2001 From: IronLu233 Date: Fri, 7 Apr 2023 22:29:19 +0800 Subject: [PATCH 2/7] feat(extension-chrome): apply implement for create new wallet --- .../{ListMarker.tsx => CircleMarker.tsx} | 2 +- .../WalletManager/containers/BeforeStart.tsx | 10 +++--- .../containers/ConfirmMnemonic.tsx | 34 +++++++++++++------ .../containers/CreateAccount.tsx | 6 ++-- .../WalletManager/containers/NewMnemonic.tsx | 29 ++++++++++++---- .../WalletManager/containers/Password.tsx | 6 ++-- .../src/pages/theme/Button.ts | 4 +++ 7 files changed, 62 insertions(+), 29 deletions(-) rename packages/extension-chrome/src/pages/Components/{ListMarker.tsx => CircleMarker.tsx} (76%) diff --git a/packages/extension-chrome/src/pages/Components/ListMarker.tsx b/packages/extension-chrome/src/pages/Components/CircleMarker.tsx similarity index 76% rename from packages/extension-chrome/src/pages/Components/ListMarker.tsx rename to packages/extension-chrome/src/pages/Components/CircleMarker.tsx index 79c78023..f5efa31a 100644 --- a/packages/extension-chrome/src/pages/Components/ListMarker.tsx +++ b/packages/extension-chrome/src/pages/Components/CircleMarker.tsx @@ -1,6 +1,6 @@ import { Box, BoxProps } from '@chakra-ui/react'; import React, { FC } from 'react'; -export const Marker: FC = (props) => ( +export const CircleMarker: FC = (props) => ( ); diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/BeforeStart.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/BeforeStart.tsx index 9f63fc51..8fee9cc2 100644 --- a/packages/extension-chrome/src/pages/WalletManager/containers/BeforeStart.tsx +++ b/packages/extension-chrome/src/pages/WalletManager/containers/BeforeStart.tsx @@ -1,7 +1,7 @@ import React, { FC } from 'react'; -import { Card, ListItem, Heading, Text, UnorderedList, ListIcon, Button } from '@chakra-ui/react'; +import { Card, ListItem, Heading, Text, UnorderedList, ListIcon, Button, Center } from '@chakra-ui/react'; import { useNavigate } from 'react-router-dom'; -import { Marker } from '../../Components/ListMarker'; +import { CircleMarker } from '../../Components/CircleMarker'; const texts = [ 'We do not send any clicks, page views or events to a central server', @@ -12,7 +12,7 @@ const texts = [ export const BeforeStart: FC = () => { const navigate = useNavigate(); return ( - <> +
Before We Start @@ -23,7 +23,7 @@ export const BeforeStart: FC = () => { {texts.map((t) => ( - + {t} ))} @@ -43,6 +43,6 @@ export const BeforeStart: FC = () => { > Get Started - +
); }; diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/ConfirmMnemonic.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/ConfirmMnemonic.tsx index b2ff3527..c4bc1be5 100644 --- a/packages/extension-chrome/src/pages/WalletManager/containers/ConfirmMnemonic.tsx +++ b/packages/extension-chrome/src/pages/WalletManager/containers/ConfirmMnemonic.tsx @@ -1,4 +1,4 @@ -import { Badge, Box, Button, Heading, SimpleGrid, Textarea } from '@chakra-ui/react'; +import { Box, Button, Center, Heading, SimpleGrid, Textarea } from '@chakra-ui/react'; import React, { FC, ReactElement, useEffect, useMemo } from 'react'; import { useList } from 'react-use'; import shuffle from 'lodash.shuffle'; @@ -6,6 +6,7 @@ import zip from 'lodash.zip'; import { useWalletCreationStore } from '../store'; import range from 'lodash.range'; import { useOutletContext } from './CreateProcessFrame'; +import { CircleMarker } from '../../Components/CircleMarker'; export const ConfirmMnemonic: FC = () => { const { initWallet, seed } = useWalletCreationStore(); @@ -40,8 +41,15 @@ export const ConfirmMnemonic: FC = () => { isAllCorrect = false; } wordElements.push( - - {chosenWord}{' '} + + {chosenWord} , ); }); @@ -57,7 +65,7 @@ export const ConfirmMnemonic: FC = () => { }, [isAllCorrect, setNextAvailable]); return ( - <> +
Confirm your Seed @@ -65,7 +73,7 @@ export const ConfirmMnemonic: FC = () => { Please select words in correct order to form your seed. - @@ -73,26 +81,30 @@ export const ConfirmMnemonic: FC = () => { {word4Choose.map((word, index) => { const chosenOrder = chosenIndex.findIndex((i) => i === index); const hasChosen = chosenOrder !== -1; + const isCorrect = seed[chosenOrder] === word; return ( {hasChosen && ( - {chosenOrder + 1} - + )}
); }; diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/CreateAccount.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/CreateAccount.tsx index df04d040..0a84f090 100644 --- a/packages/extension-chrome/src/pages/WalletManager/containers/CreateAccount.tsx +++ b/packages/extension-chrome/src/pages/WalletManager/containers/CreateAccount.tsx @@ -1,4 +1,4 @@ -import { FormControl, FormLabel, Heading, Input, Box, FormErrorMessage } from '@chakra-ui/react'; +import { FormControl, FormLabel, Heading, Input, Box, FormErrorMessage, Center } from '@chakra-ui/react'; import { Controller, useForm } from 'react-hook-form'; import Avatar from '../../Components/icons/Avatar.svg'; import React, { FC, useEffect } from 'react'; @@ -29,7 +29,7 @@ export const CreateAccount: FC<{ isImportSeed?: boolean }> = ({ isImportSeed }) }, [formState.isValid, setNextAvailable]); return ( - <> +
Create Username @@ -52,6 +52,6 @@ export const CreateAccount: FC<{ isImportSeed?: boolean }> = ({ isImportSeed }) )} /> - +
); }; diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/NewMnemonic.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/NewMnemonic.tsx index 53c07168..bb0368e4 100644 --- a/packages/extension-chrome/src/pages/WalletManager/containers/NewMnemonic.tsx +++ b/packages/extension-chrome/src/pages/WalletManager/containers/NewMnemonic.tsx @@ -11,10 +11,15 @@ import { Flex, Text, useToast, + Center, + List, + ListItem, + ListIcon, } from '@chakra-ui/react'; import React, { useEffect, useState } from 'react'; import { FC } from 'react'; import { hd } from '@ckb-lumos/lumos'; +import { CircleMarker } from '../../Components/CircleMarker'; import FileCopyIcon from '../../Components/icons/FileCopy.svg'; import { useWalletCreationStore } from '../store'; @@ -42,7 +47,7 @@ export const CreateMnemonic: FC = () => { }, [mnemonic, clipboard, setWalletStore]); return ( - <> +
Generate Wallet Seed @@ -75,16 +80,28 @@ export const CreateMnemonic: FC = () => { - - - + + + + + Store this Seed in a password manager like 1Password. + + 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. + + + + + {/* + + Store this Seed in a password manager like 1Password.

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. - - + */} +
); }; diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/Password.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/Password.tsx index bc956037..71ffd095 100644 --- 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 } from '@chakra-ui/react'; +import { FormControl, FormLabel, Input, Heading, VStack, Box, FormErrorMessage, Center } from '@chakra-ui/react'; import { Controller, useForm } from 'react-hook-form'; import { useWalletCreationStore } from '../store'; @@ -42,7 +42,7 @@ export const SetPassword: FC = ({ isImportSeed }) => { }, [setNextAvailable, formState]); return ( - <> +
Create password @@ -121,6 +121,6 @@ export const SetPassword: FC = ({ isImportSeed }) => { */} - +
); }; diff --git a/packages/extension-chrome/src/pages/theme/Button.ts b/packages/extension-chrome/src/pages/theme/Button.ts index e460a6db..8a82a016 100644 --- a/packages/extension-chrome/src/pages/theme/Button.ts +++ b/packages/extension-chrome/src/pages/theme/Button.ts @@ -39,6 +39,10 @@ const outline = defineStyle(({ colorScheme, theme }) => { bg: transparentize(colorScheme, 0.24)(theme), _disabled: { bg: 'transparent' }, }, + _selected: { + bg: transparentize(colorScheme, 0.24)(theme), + _disabled: { bg: 'transparent' }, + }, }; }); From 6f865d34646d17aad79383ec847295fee60eab16 Mon Sep 17 00:00:00 2001 From: IronLu233 Date: Mon, 10 Apr 2023 17:14:11 +0800 Subject: [PATCH 3/7] feat(extension-chrome): use design system on register and wallet home --- .../src/pages/Components/DialogFrame.tsx | 2 +- .../src/pages/Components/WhiteAlphaBox.tsx | 2 +- .../containers/SignData/SignData.tsx | 2 +- .../containers/SignTransaction.tsx | 4 +- .../src/pages/Popup/containers/Home.tsx | 9 +- .../containers/Network/NetworkConfig.tsx | 108 +++++++++--------- .../pages/Popup/containers/WhitelistSites.tsx | 59 ++++++---- .../containers/CreateProcessFrame.tsx | 8 +- .../containers/RecoveryWallet.tsx | 23 ++-- .../src/pages/WalletManager/index.tsx | 16 ++- .../src/pages/WalletManager/types.ts | 4 +- .../extension-chrome/src/pages/theme/Input.ts | 2 + .../extension-chrome/src/pages/theme/Radio.ts | 4 +- .../extension-chrome/src/pages/theme/index.ts | 25 ++++ 14 files changed, 163 insertions(+), 105 deletions(-) diff --git a/packages/extension-chrome/src/pages/Components/DialogFrame.tsx b/packages/extension-chrome/src/pages/Components/DialogFrame.tsx index 275179d3..044508a1 100644 --- a/packages/extension-chrome/src/pages/Components/DialogFrame.tsx +++ b/packages/extension-chrome/src/pages/Components/DialogFrame.tsx @@ -34,7 +34,7 @@ export const DialogFrame: FC = ({ meta }) => { direction="column" position="relative" maxW="500px" - pt={title ? '28px' : '44px'} + pt="32px" h="100vh" px="24px" pb="72px" diff --git a/packages/extension-chrome/src/pages/Components/WhiteAlphaBox.tsx b/packages/extension-chrome/src/pages/Components/WhiteAlphaBox.tsx index 770fae12..52bedc9f 100644 --- a/packages/extension-chrome/src/pages/Components/WhiteAlphaBox.tsx +++ b/packages/extension-chrome/src/pages/Components/WhiteAlphaBox.tsx @@ -5,7 +5,7 @@ import { Flex, FlexProps } from '@chakra-ui/react'; export const WhiteAlphaBox: FC = ({ children, sx, ...props }) => { return ( { maxW="100%" overflow="hidden" whiteSpace="nowrap" - color="yellow.200" + color="accent" as={RouteLink} to="/sign-transaction/view-data" cursor="pointer" diff --git a/packages/extension-chrome/src/pages/Notification/containers/SignTransaction.tsx b/packages/extension-chrome/src/pages/Notification/containers/SignTransaction.tsx index 59cb581e..7629c0ec 100644 --- a/packages/extension-chrome/src/pages/Notification/containers/SignTransaction.tsx +++ b/packages/extension-chrome/src/pages/Notification/containers/SignTransaction.tsx @@ -47,7 +47,7 @@ const CellCapacity: FC<{ capacity: string }> = ({ capacity }) => { return ( <> {decimalPart ? ( - + ≈{integerPart} {' CKB'} @@ -124,7 +124,7 @@ const TransactionIOList: FC = ({ type, networkName, tx, #{index + 1} - + {addr.slice(0, 5)}...{addr.slice(-4)} diff --git a/packages/extension-chrome/src/pages/Popup/containers/Home.tsx b/packages/extension-chrome/src/pages/Popup/containers/Home.tsx index cc027712..77a9982b 100644 --- a/packages/extension-chrome/src/pages/Popup/containers/Home.tsx +++ b/packages/extension-chrome/src/pages/Popup/containers/Home.tsx @@ -68,10 +68,15 @@ export const Home: FC = () => { - + {entries.map(({ title, icon, onClick, testId }) => ( { onClick={onClick} type="button" > -
+
{icon}
diff --git a/packages/extension-chrome/src/pages/Popup/containers/Network/NetworkConfig.tsx b/packages/extension-chrome/src/pages/Popup/containers/Network/NetworkConfig.tsx index 13e7786d..b1ead0c0 100644 --- a/packages/extension-chrome/src/pages/Popup/containers/Network/NetworkConfig.tsx +++ b/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, Grid } 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 ( - - - - {networks?.map((network, index) => ( - */} + + + {networks?.map((network, index) => ( + - - {network.displayName} - - - {!PERSIST_IDS.has(network.id) && ( - - - { - await removeNetworkMutation.mutateAsync(network.id); - await configQuery.invalidate(); - }} - w="20px" - h="20px" - color="white" - /> - - )} - - ))} - - - + }, + }} + _hover={{ + backgroundColor: 'white.200', + }} + transitionProperty="common" + transitionDuration="normal" + key={network.id} + w="100%" + alignItems="center" + justifyContent="space-between" + px="20px" + > + + {network.displayName} + + {!PERSIST_IDS.has(network.id) && ( + + + { + await removeNetworkMutation.mutateAsync(network.id); + await configQuery.invalidate(); + }} + w="20px" + h="20px" + color="white" + /> + + )} + + ))} + + + {/* */}
) : ( - {filteredSites?.map((site, index) => ( - -
- + +
+
+ +
+ + + {site.host} + + +
- - - {site.host} - - - ))} - + )} ); diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/CreateProcessFrame.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/CreateProcessFrame.tsx index ed2d27e4..42c47c8a 100644 --- a/packages/extension-chrome/src/pages/WalletManager/containers/CreateProcessFrame.tsx +++ b/packages/extension-chrome/src/pages/WalletManager/containers/CreateProcessFrame.tsx @@ -102,8 +102,6 @@ export const CreateProcessFrame: FC = () => { ); const currentStep = flowConfig.steps[currentPathIndex]; - const isLastStep = currentPathIndex === flowPaths.length - 1; - const goBack = () => { setNextAvailable(false); navigate(currentPathIndex === 0 ? flowConfig.entry : flowPaths[currentPathIndex - 1], { replace: true }); @@ -166,7 +164,7 @@ export const CreateProcessFrame: FC = () => {
- {(!isLastStep || !flowConfig.disableBackOnExit) && ( + {!currentStep.disableBack && ( diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/RecoveryWallet.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/RecoveryWallet.tsx index 3a6f639c..a401a31d 100644 --- a/packages/extension-chrome/src/pages/WalletManager/containers/RecoveryWallet.tsx +++ b/packages/extension-chrome/src/pages/WalletManager/containers/RecoveryWallet.tsx @@ -13,6 +13,7 @@ import { InputProps, InputGroup, InputRightElement, + Center, } from '@chakra-ui/react'; import times from 'lodash.times'; import React, { useCallback, useEffect, useRef } from 'react'; @@ -141,16 +142,16 @@ export const RecoveryWallet: FC = () => { }); return ( - <> +
Access Wallet With Your Seed - + Nexus cannot recover your password. We will use your Seed to validate your ownership, restore your wallet and set up a new password. First, enter the Seed that you were given when you created your wallet. - + Type your Seed here @@ -158,7 +159,7 @@ export const RecoveryWallet: FC = () => { You can paste your entire Seed into any field - + {inputs} @@ -174,17 +175,13 @@ export const RecoveryWallet: FC = () => { ); return ( - <> - {hasInvalidWord && ( - - - Please check your Seed - - )} - + + + Please check your Seed + ); }} /> - +
); }; diff --git a/packages/extension-chrome/src/pages/WalletManager/index.tsx b/packages/extension-chrome/src/pages/WalletManager/index.tsx index 7a6411f1..3b067c77 100644 --- a/packages/extension-chrome/src/pages/WalletManager/index.tsx +++ b/packages/extension-chrome/src/pages/WalletManager/index.tsx @@ -44,12 +44,17 @@ const routeConfig: RouteObject[] = [ { path: 'account', title: 'Create a Username', description: 'Create a username' }, { path: 'password', title: 'Create Password', description: 'Choose a secure one' }, { path: 'seed', title: 'Generate Wallet Seed', description: 'Remember it!', displayOnly: true }, - { path: 'confirm', title: 'Confirm Seed', description: 'Confirm your seed' }, + { + path: 'confirm', + title: 'Confirm Seed', + description: 'Confirm your seed', + nextButtonText: 'Confirm', + disableBack: true, + }, ], entry: '/', exit: '/success', disableBackOnExit: true, - exitButtonText: 'Confirm', } as CreateFlowConfig; }, children: [ @@ -81,8 +86,13 @@ const routeConfig: RouteObject[] = [ path: 'seed', title: 'Confirm Seed', description: 'Confirm your wallet seed', + nextButtonText: 'Confirm', + }, + { + path: 'password', + title: 'Create Password', + description: 'Create a secure password', }, - { path: 'password', title: 'Create Password', description: 'Create a secure password' }, { path: 'account', title: 'Create Username', description: 'Create a username' }, ], entry: '/', diff --git a/packages/extension-chrome/src/pages/WalletManager/types.ts b/packages/extension-chrome/src/pages/WalletManager/types.ts index b2589b7e..e0af295f 100644 --- a/packages/extension-chrome/src/pages/WalletManager/types.ts +++ b/packages/extension-chrome/src/pages/WalletManager/types.ts @@ -2,6 +2,8 @@ export type StepConfig = { path: string; title: string; description?: string; + nextButtonText?: string; + disableBack?: boolean; /** * if true, the next page will only trigger the `onNext` callback, and outlet will not call `onNext` @@ -13,6 +15,4 @@ export type CreateFlowConfig = { steps: StepConfig[]; entry: string; exit: string; - disableBackOnExit?: boolean; - exitButtonText?: string; }; diff --git a/packages/extension-chrome/src/pages/theme/Input.ts b/packages/extension-chrome/src/pages/theme/Input.ts index 0a4cd795..f069a596 100644 --- a/packages/extension-chrome/src/pages/theme/Input.ts +++ b/packages/extension-chrome/src/pages/theme/Input.ts @@ -17,6 +17,7 @@ const primary = definePartsStyle(({ theme }) => ({ boxShadow: `0 0 0 1px ${getColor(theme, 'primary')}`, _invalid: { borderColor: 'error.darker', + boxShadow: 'none', }, }, }, @@ -44,6 +45,7 @@ const accent = definePartsStyle(({ theme }) => ({ _invalid: { borderColor: 'error.lighter', + boxShadow: 'none', }, }, }, diff --git a/packages/extension-chrome/src/pages/theme/Radio.ts b/packages/extension-chrome/src/pages/theme/Radio.ts index 5095a6ff..ce60d7b2 100644 --- a/packages/extension-chrome/src/pages/theme/Radio.ts +++ b/packages/extension-chrome/src/pages/theme/Radio.ts @@ -8,7 +8,9 @@ export const Radio = defineMultiStyleConfig({ return { control: { color: colorScheme, - transition: 'border var(--chakra-transition-duration-normal)', + transitionProperty: 'border', + transitionDuration: 'normal', + boxShadow: 'none !important', _checked: { borderColor: colorScheme, diff --git a/packages/extension-chrome/src/pages/theme/index.ts b/packages/extension-chrome/src/pages/theme/index.ts index a480c25d..4cc01602 100644 --- a/packages/extension-chrome/src/pages/theme/index.ts +++ b/packages/extension-chrome/src/pages/theme/index.ts @@ -35,6 +35,31 @@ export const theme = extendTheme( 'success.darker': '#38A169', 'success.lighter': '#68D391', 'success.bg': '#C6F6D5', + + white: 'rgba(255, 255, 255, 1)', + 'white.900': 'rgba(255, 255, 255, 0.92)', + 'white.800': 'rgba(255, 255, 255, 0.80)', + 'white.700': 'rgba(255, 255, 255, 0.64)', + 'white.600': 'rgba(255, 255, 255, 0.48)', + 'white.500': 'rgba(255, 255, 255, 0.36)', + 'white.400': 'rgba(255, 255, 255, 0.24)', + 'white.300': 'rgba(255, 255, 255, 0.16)', + 'white.200': 'rgba(255, 255, 255, 0.08)', + 'white.100': 'rgba(255, 255, 255, 0.06)', + + 'gray.900': '#171923', + 'gray.800': '#1A202C', + 'gray.700': '#2D3748', + 'gray.600': '#4A5568', + 'gray.500': '#718096', + 'gray.400': '#A0AEC0', + 'gray.300': '#CBD5E0', + 'gray.200': '#E2E8F0', + 'gray.100': '#EDF2F7', + 'gray.50': '#F7FAFC', + }, + symantecTokens: { + 'transaction.normal': 'var(--chakra-transition-property-normal) var(--chakra-transition-duration-normal)', }, }, { From 6f3417f45c2a5e025534b804d6dac961f86fb6a4 Mon Sep 17 00:00:00 2001 From: IronLu233 Date: Tue, 11 Apr 2023 17:37:04 +0800 Subject: [PATCH 4/7] feat(extension-chrome): design system refactor --- .../src/pages/Components/ProgressLine.tsx | 31 ++++++ .../src/pages/Components/ProgressSteps.tsx | 56 +++++++++++ .../src/pages/Components/SearchBar.tsx | 36 +++++++ .../containers/SignTransaction.tsx | 1 + .../Popup/containers/Network/EditNetwork.tsx | 2 +- .../containers/Network/NetworkConfig.tsx | 95 ++++++++++--------- .../pages/Popup/containers/WhitelistSites.tsx | 46 +-------- .../containers/CreateProcessFrame.tsx | 81 +--------------- .../WalletManager/containers/NewMnemonic.tsx | 2 +- .../extension-chrome/src/pages/theme/Alert.ts | 32 +++++++ .../extension-chrome/src/pages/theme/Input.ts | 40 ++++---- .../extension-chrome/src/pages/theme/Radio.ts | 5 + .../extension-chrome/src/pages/theme/index.ts | 2 + 13 files changed, 247 insertions(+), 182 deletions(-) create mode 100644 packages/extension-chrome/src/pages/Components/ProgressLine.tsx create mode 100644 packages/extension-chrome/src/pages/Components/ProgressSteps.tsx create mode 100644 packages/extension-chrome/src/pages/Components/SearchBar.tsx create mode 100644 packages/extension-chrome/src/pages/theme/Alert.ts diff --git a/packages/extension-chrome/src/pages/Components/ProgressLine.tsx b/packages/extension-chrome/src/pages/Components/ProgressLine.tsx new file mode 100644 index 00000000..ef8e9ecd --- /dev/null +++ b/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 = ({ total, current }) => { + const getIndicatorColor = (index: number) => { + if (index < current) { + return 'primary.lighter'; + } else if (index > current) { + return 'gray.300'; + } + return 'primary'; + }; + return ( + + {range(0, total).map((index) => ( + + ))} + + ); +}; diff --git a/packages/extension-chrome/src/pages/Components/ProgressSteps.tsx b/packages/extension-chrome/src/pages/Components/ProgressSteps.tsx new file mode 100644 index 00000000..91fa19a6 --- /dev/null +++ b/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 & BoxProps; +const renderSingleStep: StepsProps['itemRender'] = ({ title, description, status }) => { + const icon = { + wait: , + process: , + finish: , + error: <>, + }[status ?? 'wait']; + return ( + + + {icon} + + + {title} + + + + {description} + + + ); +}; + +export const ProgressSteps: FC = (props) => { + return ; +}; diff --git a/packages/extension-chrome/src/pages/Components/SearchBar.tsx b/packages/extension-chrome/src/pages/Components/SearchBar.tsx new file mode 100644 index 00000000..79fe58f5 --- /dev/null +++ b/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 & Pick; + +export const SearchBar: FC = ({ onChange, onBlur, onFocus, onClick, value, defaultValue, ...rest }) => ( + + +
+ +
+ + + +); diff --git a/packages/extension-chrome/src/pages/Notification/containers/SignTransaction.tsx b/packages/extension-chrome/src/pages/Notification/containers/SignTransaction.tsx index 7629c0ec..c9af4567 100644 --- a/packages/extension-chrome/src/pages/Notification/containers/SignTransaction.tsx +++ b/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" > diff --git a/packages/extension-chrome/src/pages/Popup/containers/Network/EditNetwork.tsx b/packages/extension-chrome/src/pages/Popup/containers/Network/EditNetwork.tsx index 79eadab4..750fe47a 100644 --- a/packages/extension-chrome/src/pages/Popup/containers/Network/EditNetwork.tsx +++ b/packages/extension-chrome/src/pages/Popup/containers/Network/EditNetwork.tsx @@ -95,7 +95,7 @@ export const EditNetwork: FC = ({ mode }) => { return ( - + Name diff --git a/packages/extension-chrome/src/pages/Popup/containers/Network/NetworkConfig.tsx b/packages/extension-chrome/src/pages/Popup/containers/Network/NetworkConfig.tsx index b1ead0c0..3c4f5864 100644 --- a/packages/extension-chrome/src/pages/Popup/containers/Network/NetworkConfig.tsx +++ b/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 ( - {/* */} - - {networks?.map((network, index) => ( - ( + - - {network.displayName} - - {!PERSIST_IDS.has(network.id) && ( - - - { - await removeNetworkMutation.mutateAsync(network.id); - await configQuery.invalidate(); - }} - w="20px" - h="20px" - color="white" - /> - - )} - - ))} - + }, + }} + _hover={{ + backgroundColor: 'white.200', + }} + transitionProperty="common" + transitionDuration="normal" + key={network.id} + w="100%" + alignItems="center" + justifyContent="space-between" + px="20px" + > + + {network.displayName} + + {!PERSIST_IDS.has(network.id) && ( + + + { + await removeNetworkMutation.mutateAsync(network.id); + await configQuery.invalidate(); + }} + w="20px" + h="20px" + color="white" + /> + + )} + + ))} {/* */} diff --git a/packages/extension-chrome/src/pages/Popup/containers/WhitelistSites.tsx b/packages/extension-chrome/src/pages/Popup/containers/WhitelistSites.tsx index 2542a35e..be3dafec 100644 --- a/packages/extension-chrome/src/pages/Popup/containers/WhitelistSites.tsx +++ b/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 = () => { {configQuery.data?.nickname} is connected to these sites. They can view your account address - - - - - setSearchQuery(e.target.value)} - value={searchQuery} - h="60px" - pl="48px" - /> - + setSearchQuery(e.target.value)} value={searchQuery} /> {!filteredSites?.length ? ( -
+
No whitelist sites found. diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/CreateProcessFrame.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/CreateProcessFrame.tsx index 42c47c8a..96329843 100644 --- a/packages/extension-chrome/src/pages/WalletManager/containers/CreateProcessFrame.tsx +++ b/packages/extension-chrome/src/pages/WalletManager/containers/CreateProcessFrame.tsx @@ -1,5 +1,5 @@ import React, { FC, useCallback, useMemo, useState } from 'react'; -import { Box, Button, Center, Flex, FlexProps, Grid, HStack, Icon, Text, useToast } from '@chakra-ui/react'; +import { Button, Center, Flex, HStack, useToast } from '@chakra-ui/react'; import { Outlet, useLoaderData, @@ -7,76 +7,12 @@ import { useNavigate, useOutletContext as _useOutletContext, } from 'react-router-dom'; -import StepProcessingIcon from '../../Components/icons/StepProcessing.svg'; -import StepWaitingIcon from '../../Components/icons/StepWaiting.svg'; -import range from 'lodash.range'; import { Logo } from '../../Components/Logo'; -import { CheckCircleIcon, ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'; +import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'; import { CreateFlowConfig } from '../types'; -import Steps from 'rc-steps'; -import { StepsProps } from 'rc-steps/lib/Steps'; - -const ProcessIndicator: FC<{ total: number; current: number } & FlexProps> = ({ total, current }) => { - const getIndicatorColor = (index: number) => { - if (index < current) { - return 'primary.lighter'; - } else if (index > current) { - return 'gray.300'; - } - return 'primary'; - }; - return ( - - {range(0, total).map((index) => ( - - ))} - - ); -}; - -const renderSingleStep: StepsProps['itemRender'] = ({ title, description, status }) => { - const icon = { - wait: , - process: , - finish: , - error: <>, - }[status ?? 'wait']; - return ( - - - {icon} - - - {title} - - - - {description} - - - ); -}; +import { ProcessIndicator } from '../../Components/ProgressLine'; +import { ProgressSteps } from '../../Components/ProgressSteps'; export type OutletContext = { whenSubmit: (cb: () => Promise) => void; @@ -148,14 +84,7 @@ export const CreateProcessFrame: FC = () => { height="100vh" > - - - +
diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/NewMnemonic.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/NewMnemonic.tsx index bb0368e4..275f87bc 100644 --- a/packages/extension-chrome/src/pages/WalletManager/containers/NewMnemonic.tsx +++ b/packages/extension-chrome/src/pages/WalletManager/containers/NewMnemonic.tsx @@ -51,7 +51,7 @@ export const CreateMnemonic: FC = () => { Generate Wallet Seed - + Warning diff --git a/packages/extension-chrome/src/pages/theme/Alert.ts b/packages/extension-chrome/src/pages/theme/Alert.ts new file mode 100644 index 00000000..5d4ee7a6 --- /dev/null +++ b/packages/extension-chrome/src/pages/theme/Alert.ts @@ -0,0 +1,32 @@ +import { alertAnatomy } from '@chakra-ui/anatomy'; +import { createMultiStyleConfigHelpers, AlertProps } from '@chakra-ui/react'; + +const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(alertAnatomy.keys); + +const baseStyle = definePartsStyle(({ status }) => { + const color = { + error: 'error', + warning: 'warning', + info: 'info', + success: 'success', + loading: 'info', + }[status as NonNullable]; + return { + container: { + bg: `${color}.bg`, + }, + icon: { + color: `${color}.darker`, + }, + title: { + color: 'gray.900', + }, + description: { + color: 'gray.900', + }, + }; +}); + +export const Alert = defineMultiStyleConfig({ + baseStyle, +}); diff --git a/packages/extension-chrome/src/pages/theme/Input.ts b/packages/extension-chrome/src/pages/theme/Input.ts index f069a596..83e98981 100644 --- a/packages/extension-chrome/src/pages/theme/Input.ts +++ b/packages/extension-chrome/src/pages/theme/Input.ts @@ -7,18 +7,21 @@ const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpe const primary = definePartsStyle(({ theme }) => ({ field: { color: 'black', - borderWidth: '2px', + borderWidth: '1px', + borderColor: 'gray.100', + + _hover: { + borderColor: 'gray.300', + }, + _invalid: { - borderColor: 'error.darker', + borderColor: `${getColor(theme, 'error.darker')} !important`, + boxShadow: 'none !important', }, _focusVisible: { borderWidth: '2px', borderColor: 'primary', boxShadow: `0 0 0 1px ${getColor(theme, 'primary')}`, - _invalid: { - borderColor: 'error.darker', - boxShadow: 'none', - }, }, }, element: { @@ -31,22 +34,19 @@ const primary = definePartsStyle(({ theme }) => ({ const accent = definePartsStyle(({ theme }) => ({ field: { color: 'black', - borderWidth: '2px', + borderWidth: '1px', + borderColor: 'white.300', + _hover: { + borderColor: 'white.700', + }, _invalid: { - borderColor: 'error.lighter', - _focus: { - borderColor: 'error.lighter', - }, + borderColor: `${getColor(theme, 'error.lighter')} !important`, + boxShadow: 'none !important', }, _focusVisible: { borderWidth: '2px', borderColor: 'accent', boxShadow: `0 0 0 1px ${getColor(theme, 'accent')}`, - - _invalid: { - borderColor: 'error.lighter', - boxShadow: 'none', - }, }, }, element: { @@ -57,5 +57,13 @@ const accent = definePartsStyle(({ theme }) => ({ })); export const Input = defineMultiStyleConfig({ + baseStyle: { + field: { + _placeholder: { + color: 'gray.400', + }, + color: 'gray.900', + }, + }, variants: { primary, accent }, }); diff --git a/packages/extension-chrome/src/pages/theme/Radio.ts b/packages/extension-chrome/src/pages/theme/Radio.ts index ce60d7b2..f6f9f4f0 100644 --- a/packages/extension-chrome/src/pages/theme/Radio.ts +++ b/packages/extension-chrome/src/pages/theme/Radio.ts @@ -31,6 +31,11 @@ export const Radio = defineMultiStyleConfig({ }, }, }, + container: { + _disabled: { + opacity: 0.5, + }, + }, }; }), }); diff --git a/packages/extension-chrome/src/pages/theme/index.ts b/packages/extension-chrome/src/pages/theme/index.ts index 4cc01602..415b4050 100644 --- a/packages/extension-chrome/src/pages/theme/index.ts +++ b/packages/extension-chrome/src/pages/theme/index.ts @@ -1,4 +1,5 @@ import { extendTheme, withDefaultColorScheme, withDefaultVariant } from '@chakra-ui/react'; +import { Alert } from './Alert'; import { Button } from './Button'; import { FormLabel } from './FormLabel'; import { Input } from './Input'; @@ -68,6 +69,7 @@ export const theme = extendTheme( Radio: Radio, FormLabel: FormLabel, Input: Input, + Alert: Alert, }, }, withDefaultColorScheme({ From 8c0c7836864f3b47b99e65ce4d9e9111c388afbd Mon Sep 17 00:00:00 2001 From: IronLu233 Date: Tue, 11 Apr 2023 19:27:10 +0800 Subject: [PATCH 5/7] feat(extension-chrome): modify code after code review --- ...ProgressLine.tsx => ProgressIndicator.tsx} | 3 +- .../src/pages/Components/ProgressSteps.tsx | 5 +++ .../src/pages/Components/SearchBar.tsx | 5 ++- .../src/pages/Notification/index.tsx | 1 - .../containers/Network/NetworkConfig.tsx | 1 - .../src/pages/Popup/index.tsx | 1 - .../WalletManager/containers/BeforeStart.tsx | 36 +++++++++---------- .../containers/ConfirmMnemonic.tsx | 10 +++--- .../containers/CreateProcessFrame.tsx | 4 +-- .../WalletManager/containers/NewMnemonic.tsx | 15 ++------ .../WalletManager/containers/Password.tsx | 6 ++-- .../containers/RecoveryWallet.tsx | 7 ++-- .../extension-chrome/src/pages/theme/Input.ts | 13 ++----- .../extension-chrome/src/pages/theme/Radio.ts | 1 - .../extension-chrome/src/pages/theme/index.ts | 5 +-- .../extension-chrome/src/pages/theme/utils.ts | 6 ++++ 16 files changed, 52 insertions(+), 67 deletions(-) rename packages/extension-chrome/src/pages/Components/{ProgressLine.tsx => ProgressIndicator.tsx} (87%) create mode 100644 packages/extension-chrome/src/pages/theme/utils.ts diff --git a/packages/extension-chrome/src/pages/Components/ProgressLine.tsx b/packages/extension-chrome/src/pages/Components/ProgressIndicator.tsx similarity index 87% rename from packages/extension-chrome/src/pages/Components/ProgressLine.tsx rename to packages/extension-chrome/src/pages/Components/ProgressIndicator.tsx index ef8e9ecd..f54053fa 100644 --- a/packages/extension-chrome/src/pages/Components/ProgressLine.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 = ({ total, current }) => { +export const ProgressIndicator: FC = ({ total, current, ...rest }) => { const getIndicatorColor = (index: number) => { if (index < current) { return 'primary.lighter'; @@ -24,6 +24,7 @@ export const ProcessIndicator: FC = ({ total, current }) h="5px" borderRadius="5px" backgroundColor={getIndicatorColor(index)} + {...rest} /> ))} diff --git a/packages/extension-chrome/src/pages/Components/ProgressSteps.tsx b/packages/extension-chrome/src/pages/Components/ProgressSteps.tsx index 91fa19a6..5ecc03c3 100644 --- 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} /> {description} diff --git a/packages/extension-chrome/src/pages/Components/SearchBar.tsx b/packages/extension-chrome/src/pages/Components/SearchBar.tsx index 79fe58f5..b1a5cce9 100644 --- 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 & Pick; -export const SearchBar: FC = ({ onChange, onBlur, onFocus, onClick, value, defaultValue, ...rest }) => ( +export const SearchBar: FC = ({ onChange, onBlur, onFocus, value, defaultValue, ...rest }) => (
@@ -28,7 +28,6 @@ export const SearchBar: FC = ({ 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 index 261ab4eb..3683f25d 100644 --- 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 diff --git a/packages/extension-chrome/src/pages/Popup/containers/Network/NetworkConfig.tsx b/packages/extension-chrome/src/pages/Popup/containers/Network/NetworkConfig.tsx index 3c4f5864..d969d685 100644 --- 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 = () => { ))} - {/* */} -
+
+ +
+ ); }; diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/ConfirmMnemonic.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/ConfirmMnemonic.tsx index c4bc1be5..61403839 100644 --- 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 ( -
+ Confirm your Seed - + Please select words in correct order to form your seed. - - + {word4Choose.map((word, index) => { const chosenOrder = chosenIndex.findIndex((i) => i === index); const hasChosen = chosenOrder !== -1; @@ -115,6 +115,6 @@ export const ConfirmMnemonic: FC = () => { ); })} -
+ ); }; diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/CreateProcessFrame.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/CreateProcessFrame.tsx index 96329843..ca3f9801 100644 --- 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 = () => { - + ); diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/NewMnemonic.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/NewMnemonic.tsx index 275f87bc..3c572b19 100644 --- 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 ( -
+ Generate Wallet Seed @@ -92,16 +91,6 @@ export const CreateMnemonic: FC = () => { - {/* - - - Store this Seed in a password manager like 1Password. -
-
- 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. - - */} -
+ ); }; diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/Password.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/Password.tsx index 71ffd095..fd78f7b3 100644 --- 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 = ({ isImportSeed }) => { }, [setNextAvailable, formState]); return ( -
+ Create password @@ -121,6 +121,6 @@ export const SetPassword: FC = ({ isImportSeed }) => { */} -
+ ); }; diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/RecoveryWallet.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/RecoveryWallet.tsx index a401a31d..9de48957 100644 --- 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 ( -
+ Access Wallet With Your Seed @@ -159,7 +158,7 @@ export const RecoveryWallet: FC = () => { You can paste your entire Seed into any field - + {inputs} @@ -182,6 +181,6 @@ export const RecoveryWallet: FC = () => { ); }} /> -
+ ); }; diff --git a/packages/extension-chrome/src/pages/theme/Input.ts b/packages/extension-chrome/src/pages/theme/Input.ts index 83e98981..c42297e7 100644 --- 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 index f6f9f4f0..4ea1b5bb 100644 --- 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 index 415b4050..0035956e 100644 --- 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: { diff --git a/packages/extension-chrome/src/pages/theme/utils.ts b/packages/extension-chrome/src/pages/theme/utils.ts new file mode 100644 index 00000000..b2ddc5b5 --- /dev/null +++ b/packages/extension-chrome/src/pages/theme/utils.ts @@ -0,0 +1,6 @@ +import { Dict } from '@chakra-ui/utils'; + +export function getColor(theme: Dict, color: string, defaultValue = '#000000'): string { + // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access + return theme.colors[color] || defaultValue; +} From 3f9910609e2e54a78bffe965caabd8617a035d7e Mon Sep 17 00:00:00 2001 From: Iron Lu Date: Thu, 13 Apr 2023 16:07:07 +0800 Subject: [PATCH 6/7] Update packages/extension-chrome/src/pages/WalletManager/containers/RecoveryWallet.tsx Co-authored-by: Shinya --- .../src/pages/WalletManager/containers/RecoveryWallet.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/RecoveryWallet.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/RecoveryWallet.tsx index 9de48957..1cd49f27 100644 --- a/packages/extension-chrome/src/pages/WalletManager/containers/RecoveryWallet.tsx +++ b/packages/extension-chrome/src/pages/WalletManager/containers/RecoveryWallet.tsx @@ -176,7 +176,7 @@ export const RecoveryWallet: FC = () => { return ( - Please check your Seed + Please check your seed phrase ); }} From 4c76c53379e96b56077ebaaff9107a56a3fece63 Mon Sep 17 00:00:00 2001 From: IronLu233 Date: Fri, 14 Apr 2023 15:49:08 +0800 Subject: [PATCH 7/7] fix: missing dep --- package-lock.json | 1 + packages/extension-chrome/package.json | 1 + 2 files changed, 2 insertions(+) diff --git a/package-lock.json b/package-lock.json index d76261d1..af2356e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28272,6 +28272,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", diff --git a/packages/extension-chrome/package.json b/packages/extension-chrome/package.json index 060aaf28..1edc1123 100644 --- a/packages/extension-chrome/package.json +++ b/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",