-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #68 from vechain/feat/style-choose-name
Feat/style choose name
- Loading branch information
Showing
23 changed files
with
327 additions
and
108 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
42 changes: 42 additions & 0 deletions
42
packages/vechain-kit/src/components/AccountModal/Components/Alerts/ExchangeWarningAlert.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import { | ||
| Alert, | ||
| AlertIcon, | ||
| Text, | ||
| Button, | ||
| VStack, | ||
| HStack, | ||
| } from '@chakra-ui/react'; | ||
| import { useState } from 'react'; | ||
| import { useTranslation } from 'react-i18next'; | ||
|
|
||
| export const ExchangeWarningAlert = () => { | ||
| const { t } = useTranslation(); | ||
| const [showFullText, setShowFullText] = useState(false); | ||
|
|
||
| return ( | ||
| <Alert status="warning" fontSize={'xs'} borderRadius={'xl'} p={2}> | ||
| <VStack spacing={1} align="stretch" w="full"> | ||
| <HStack spacing={2} align="flex-start"> | ||
| <AlertIcon boxSize={4} /> | ||
| <Text w="full"> | ||
| {t( | ||
| 'Sending to OceanX or other exchanges may result in loss of funds.', | ||
| )} | ||
| {showFullText && | ||
| t('Send the tokens to your VeWorld wallet first.')} | ||
| <Button | ||
| variant="link" | ||
| size="xs" | ||
| onClick={() => setShowFullText(!showFullText)} | ||
| color="inherit" | ||
| pl={6} | ||
| mt={0} | ||
| > | ||
| {t(showFullText ? 'Show Less' : 'Read More')} | ||
| </Button> | ||
| </Text> | ||
| </HStack> | ||
| </VStack> | ||
| </Alert> | ||
| ); | ||
| }; |
1 change: 1 addition & 0 deletions
1
packages/vechain-kit/src/components/AccountModal/Components/Alerts/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| export * from './FeatureAnnouncementCard'; | ||
| export * from './ExchangeWarningAlert'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
187 changes: 187 additions & 0 deletions
187
...in-kit/src/components/AccountModal/Contents/ChooseName/Components/ExistingDomainsList.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,187 @@ | ||
| import { | ||
| Accordion, | ||
| AccordionItem, | ||
| AccordionButton, | ||
| AccordionPanel, | ||
| Box, | ||
| Text, | ||
| Icon, | ||
| List, | ||
| ListItem, | ||
| Tag, | ||
| HStack, | ||
| VStack, | ||
| } from '@chakra-ui/react'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { IoChevronDown, IoChevronUp } from 'react-icons/io5'; | ||
| import { useVeChainKitConfig } from '@/providers'; | ||
| import { useWallet } from '@/hooks'; | ||
| import { useWalletMetadata } from '@/hooks/api/wallet/useWalletMetadata'; | ||
| import { AccountAvatar } from '@/components/common'; | ||
|
|
||
| type ExistingDomainsListProps = { | ||
| domains: { name: string }[]; | ||
| onDomainSelect: (domain: string) => void; | ||
| isLoading?: boolean; | ||
| }; | ||
|
|
||
| export const ExistingDomainsList = ({ | ||
| domains, | ||
| onDomainSelect, | ||
| isLoading, | ||
| }: ExistingDomainsListProps) => { | ||
| const { t } = useTranslation(); | ||
| const { darkMode: isDark } = useVeChainKitConfig(); | ||
| const { account, connection } = useWallet(); | ||
|
|
||
| // avoid flickering after loading by returning null, so if no domains are found, it will not show the accordion | ||
| if (domains.length === 0 || isLoading) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <Accordion allowToggle> | ||
| <AccordionItem border="none"> | ||
| {({ isExpanded }) => ( | ||
| <> | ||
| <AccordionButton | ||
| bg={isDark ? 'whiteAlpha.50' : 'gray.50'} | ||
| borderRadius="xl" | ||
| _hover={{ | ||
| bg: isDark ? 'whiteAlpha.100' : 'gray.100', | ||
| }} | ||
| opacity={isLoading ? 0.7 : 1} | ||
| transition="all 0.2s" | ||
| disabled={isLoading} | ||
| > | ||
| <Box flex="1" textAlign="left" py={2}> | ||
| <Text fontWeight="500"> | ||
| {isLoading | ||
| ? t('Loading your domains...') | ||
| : `${t('Your existing domains')} (${ | ||
| domains.length | ||
| })`} | ||
| </Text> | ||
| </Box> | ||
| <Icon | ||
| as={isExpanded ? IoChevronUp : IoChevronDown} | ||
| fontSize="20px" | ||
| opacity={0.5} | ||
| /> | ||
| </AccordionButton> | ||
| <AccordionPanel pb={4} pt={2}> | ||
| <List spacing={2}> | ||
| {domains.map((domain) => { | ||
| const isCurrentDomain = | ||
| domain.name === account?.domain; | ||
| const metadata = useWalletMetadata( | ||
| domain.name, | ||
| connection.network, | ||
| ); | ||
| return ( | ||
| <ListItem | ||
| key={domain.name} | ||
| p={4} | ||
| bg={isDark ? '#1f1f1e' : 'white'} | ||
| borderRadius="xl" | ||
| cursor={ | ||
| isCurrentDomain | ||
| ? 'default' | ||
| : 'pointer' | ||
| } | ||
| opacity={isCurrentDomain ? 0.7 : 1} | ||
| border={`1px solid ${ | ||
| isDark ? '#2d2d2d' : '#eaeaea' | ||
| }`} | ||
| _hover={{ | ||
| bg: isCurrentDomain | ||
| ? isDark | ||
| ? '#1f1f1e' | ||
| : 'white' | ||
| : isDark | ||
| ? '#252525' | ||
| : 'gray.50', | ||
| borderColor: isDark | ||
| ? '#3d3d3d' | ||
| : '#dedede', | ||
| }} | ||
| onClick={() => | ||
| !isCurrentDomain && | ||
| onDomainSelect(domain.name) | ||
| } | ||
| transition="all 0.2s" | ||
| > | ||
| <HStack spacing={3} align="center"> | ||
| <AccountAvatar | ||
| props={{ | ||
| width: '40px', | ||
| height: '40px', | ||
| src: metadata.image, | ||
| alt: domain.name, | ||
| }} | ||
| /> | ||
|
|
||
| <VStack | ||
| align="start" | ||
| spacing={0} | ||
| flex={1} | ||
| > | ||
| <Text | ||
| color={ | ||
| isDark | ||
| ? 'whiteAlpha.900' | ||
| : 'gray.700' | ||
| } | ||
| fontSize="md" | ||
| fontWeight="500" | ||
| > | ||
| {domain.name} | ||
| </Text> | ||
| {isCurrentDomain && ( | ||
| <Text | ||
| fontSize="sm" | ||
| color={ | ||
| isDark | ||
| ? 'whiteAlpha.600' | ||
| : 'gray.500' | ||
| } | ||
| > | ||
| {t( | ||
| 'Current domain', | ||
| )} | ||
| </Text> | ||
| )} | ||
| </VStack> | ||
|
|
||
| {isCurrentDomain && ( | ||
| <Tag | ||
| size="sm" | ||
| bg={ | ||
| isDark | ||
| ? 'whiteAlpha.200' | ||
| : 'gray.100' | ||
| } | ||
| color={ | ||
| isDark | ||
| ? 'whiteAlpha.800' | ||
| : 'gray.600' | ||
| } | ||
| px={3} | ||
| py={1} | ||
| borderRadius="full" | ||
| > | ||
| {t('Current')} | ||
| </Tag> | ||
| )} | ||
| </HStack> | ||
| </ListItem> | ||
| ); | ||
| })} | ||
| </List> | ||
| </AccordionPanel> | ||
| </> | ||
| )} | ||
| </AccordionItem> | ||
| </Accordion> | ||
| ); | ||
| }; |
Oops, something went wrong.