Skip to content

Commit

Permalink
feat: go back to main modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@Agilulfo1820
Agilulfo1820 committed Dec 17, 2024
1 parent 009bfb8 commit 12caab0
Show file tree
Hide file tree
Showing 2 changed files with 177 additions and 147 deletions.
292 changes: 154 additions & 138 deletions ...es/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/ConnectModal/ConnectModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,169 +56,185 @@ export const ConnectModal = ({ isOpen, onClose, logo }: Props) => {
return (
<>
<Modal
motionPreset="slideInBottom"
motionPreset={isDesktop ? 'none' : 'slideInBottom'}
isOpen={isOpen}
onClose={onClose}
isCentered
size={'sm'}
variant={'connectModalVariant'}
>
<ModalOverlay />
<ModalContent {...(_modalContentProps as ModalContentProps)}>
<ModalHeader
fontSize={'sm'}
fontWeight={'400'}
textAlign={'center'}
color={isDark ? '#dfdfdd' : '#4d4d4d'}
{!ecosystemModal.isOpen && (
<ModalContent
{...(_modalContentProps as ModalContentProps)}
>
{'Log in or sign up'}
</ModalHeader>
<HStack justify={'center'}>
<Image
src={logo || '/images/favicon.png'}
maxW={'180px'}
maxH={'90px'}
m={10}
alt="logo"
/>
</HStack>

<ModalCloseButton />
<ModalBody>
<HStack
spacing={4}
w={'full'}
justify={'center'}
mb={'24px'}
<ModalHeader
fontSize={'sm'}
fontWeight={'400'}
textAlign={'center'}
color={isDark ? '#dfdfdd' : '#4d4d4d'}
>
<Text
color={isDark ? '#dfdfdd' : '#4d4d4d'}
fontSize={14}
>
{'Select a login method'}
</Text>
{'Log in or sign up'}
</ModalHeader>
<HStack justify={'center'}>
<Image
src={logo || '/images/favicon.png'}
maxW={'180px'}
maxH={'90px'}
m={10}
alt="logo"
/>
</HStack>
<VStack spacing={4} w={'full'}>
<Button
fontSize={'14px'}
fontWeight={'400'}
backgroundColor={
isDark ? 'transparent' : '#ffffff'
}
border={`1px solid ${
isDark ? '#ffffff29' : '#ebebeb'
}`}
p={6}
borderRadius={16}

<ModalCloseButton />
<ModalBody>
<HStack
spacing={4}
w={'full'}
onClick={() => {
onClose();
login();
}}
justify={'center'}
mb={'24px'}
>
<HStack
spacing={4}
<Text
color={isDark ? '#dfdfdd' : '#4d4d4d'}
fontSize={14}
>
{'Select a login method'}
</Text>
</HStack>
<VStack spacing={4} w={'full'}>
<Button
fontSize={'14px'}
fontWeight={'400'}
backgroundColor={
isDark ? 'transparent' : '#ffffff'
}
border={`1px solid ${
isDark ? '#ffffff29' : '#ebebeb'
}`}
p={6}
borderRadius={16}
w={'full'}
justify={'center'}
onClick={() => {
onClose();
login();
}}
>
<HStack justify={'start'}>
<TwitterLogo isDark={isDark} />
<GoogleLogo />
</HStack>
<HStack justify={'start'}>
<Text
color={
isDark ? '#dfdfdd' : '#4d4d4d'
}
>
{'Continue with Social'}
</Text>
<HStack
spacing={4}
w={'full'}
justify={'center'}
>
<HStack justify={'start'}>
<TwitterLogo isDark={isDark} />
<GoogleLogo />
</HStack>
<HStack justify={'start'}>
<Text
color={
isDark
? '#dfdfdd'
: '#4d4d4d'
}
>
{'Continue with Social'}
</Text>
</HStack>
</HStack>
</HStack>
</Button>
{privyConfig?.ecosystemAppsID &&
privyConfig?.ecosystemAppsID?.length > 0 && (
<>
<Button
fontSize={'14px'}
fontWeight={'400'}
backgroundColor={
isDark
? 'transparent'
: '#ffffff'
}
border={`1px solid ${
isDark ? '#ffffff29' : '#ebebeb'
}`}
p={6}
borderRadius={16}
w={'full'}
color={
isDark ? '#dfdfdd' : '#4d4d4d'
}
onClick={() => {
onClose();
ecosystemModal.onOpen();
}}
>
<HStack
spacing={4}
</Button>
{privyConfig?.ecosystemAppsID &&
privyConfig?.ecosystemAppsID?.length >
0 && (
<>
<Button
fontSize={'14px'}
fontWeight={'400'}
backgroundColor={
isDark
? 'transparent'
: '#ffffff'
}
border={`1px solid ${
isDark
? '#ffffff29'
: '#ebebeb'
}`}
p={6}
borderRadius={16}
w={'full'}
justify={'center'}
color={
isDark
? '#dfdfdd'
: '#4d4d4d'
}
onClick={() => {
ecosystemModal.onOpen();
}}
>
<HStack justify={'start'}>
<AppsLogo
boxSize={'70px'}
/>
<HStack
spacing={4}
w={'full'}
justify={'center'}
>
<HStack justify={'start'}>
<AppsLogo
boxSize={'70px'}
/>
</HStack>
<HStack justify={'start'}>
<Text
color={
isDark
? '#dfdfdd'
: '#4d4d4d'
}
>
{
'Continue with VeChain Apps'
}
</Text>
</HStack>
</HStack>
<HStack justify={'start'}>
<Text
color={
isDark
? '#dfdfdd'
: '#4d4d4d'
}
>
{
'Continue with VeChain Apps'
}
</Text>
</HStack>
</HStack>
</Button>
</>
)}
<Button
fontSize={'14px'}
fontWeight={'400'}
variant={'link'}
w={'full'}
onClick={() => {
onClose();
open();
}}
>
<HStack
spacing={4}
</Button>
</>
)}
<Button
fontSize={'14px'}
fontWeight={'400'}
variant={'link'}
w={'full'}
justify={'center'}
onClick={() => {
onClose();
open();
}}
>
<Text
color={isDark ? '#dfdfdd' : '#4d4d4dab'}
<HStack
spacing={4}
w={'full'}
justify={'center'}
>
{'or continue with Crypto Wallet'}
</Text>
</HStack>
</Button>
</VStack>
</ModalBody>
<ModalFooter />
</ModalContent>
<Text
color={
isDark ? '#dfdfdd' : '#4d4d4dab'
}
>
{'or continue with Crypto Wallet'}
</Text>
</HStack>
</Button>
</VStack>
</ModalBody>
<ModalFooter />
</ModalContent>
)}
</Modal>

<EcosystemAppsModal
isOpen={ecosystemModal.isOpen}
onClose={ecosystemModal.onClose}
onBack={() => {
ecosystemModal.onClose();
// Instead of closing the connect modal, we just close the ecosystem modal
// which will show the connect modal again
}}
/>
</>
);
Expand Down
Loading

0 comments on commit 12caab0

Please sign in to comment.