Merge branch 'main' into main-v2

packages/dapp-kit-react-privy/src/assets/icons/VechainLogo/VechainLogo.tsx

@@ -0,0 +1,17 @@
+import { Icon, IconProps } from '@chakra-ui/react';
+import React from 'react';
+
+type Props = {
+    isDark?: boolean;
+} & Omit<IconProps, 'dangerouslySetInnerHTML'>;
+
+export const VechainLogo: React.FC<Props> = ({ isDark = false, ...props }) => {
+    return (
+        <Icon viewBox="0 0 320 292" {...props}>
+            <path
+                d="M320 0H291.94c-7 0-13.34 4-15.94 10.3L198.83 167.26l-0.08-0.17-20 41.65 0.08 0.17-20 41.65-100-208.17h28.52c7 0 13.34 4 15.94 10.3l65.2 135.15 20-41.65L137.91 37C127.23 14.72 104.74 0 80.07 0H0l20 41.65h0.06L140.41 292h40L320 0Z"
+                fill={isDark ? 'white' : 'black'}
+            />
+        </Icon>
+    );
+};

packages/dapp-kit-react-privy/src/assets/icons/VechainLogo/index.ts

@@ -0,0 +1 @@
+export * from './VechainLogo';

packages/dapp-kit-react-privy/src/assets/icons/VechainLogoHorizontal/VechainLogoHorizontal.tsx

@@ -0,0 +1,23 @@
+import { Image, ImageProps } from '@chakra-ui/react';
+import React from 'react';
+
+type Props = {
+    isDark?: boolean;
+} & Omit<ImageProps, 'dangerouslySetInnerHTML'>;
+
+export const VechainLogoHorizontal: React.FC<Props> = ({
+    isDark = false,
+    ...props
+}) => {
+    return (
+        <Image
+            src={
+                isDark
+                    ? 'https://i.ibb.co/zGdf6FS/01-Logo-Orizzontale-Negativo-RGB.png'
+                    : 'https://i.ibb.co/KNVyJTM/01-Logo-Orizzontale-Positivo-RGB.png'
+            }
+            alt="Vechain Logo Horizontal"
+            {...props}
+        />
+    );
+};

packages/dapp-kit-react-privy/src/assets/icons/VechainLogoHorizontal/index.ts

@@ -0,0 +1 @@
+export * from './VechainLogoHorizontal';

packages/dapp-kit-react-privy/src/assets/icons/index.ts

@@ -0,0 +1,4 @@
+export * from './GoogleLogo';
+export * from './TwitterLogo';
+export * from './VechainLogo';
+export * from './VechainLogoHorizontal';

packages/dapp-kit-react-privy/src/components/AccountModal/Components/AccountSelector.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { Text, Icon, HStack, Button } from '@chakra-ui/react';
+import { humanAddress } from '../../../utils';
+import { Wallet } from '../../../hooks';
+import { IoIosArrowDown } from 'react-icons/io';
+import { useState } from 'react';
+import { IoCheckmarkOutline, IoCopyOutline } from 'react-icons/io5';
+
+type Props = {
+    wallet: Wallet;
+    size?: string;
+    onClick?: () => void;
+};
+
+export const AccountSelector = ({ wallet, size = 'md', onClick }: Props) => {
+    const [copied, setCopied] = useState(false);
+
+    const copyToClipboard = async (textToCopy: string) => {
+        await navigator.clipboard.writeText(textToCopy);
+        setCopied(true);
+        setTimeout(() => {
+            setCopied(false);
+        }, 2000);
+    };
+
+    return (
+        <HStack>
+            <Button
+                w="fit-content"
+                h="fit-content"
+                p={2}
+                px={4}
+                onClick={onClick}
+                variant="selector"
+            >
+                <HStack spacing={4} align="center">
+                    <Text fontSize={size} fontWeight="500">
+                        {wallet.domain || humanAddress(wallet.address, 6, 4)}
+                    </Text>
+
+                    <Icon boxSize={5} as={IoIosArrowDown} cursor="pointer" />
+                </HStack>
+            </Button>
+
+            <Button
+                p={2}
+                px={4}
+                variant="selector"
+                onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    copyToClipboard(wallet.address);
+                }}
+            >
+                <Icon
+                    boxSize={5}
+                    as={copied ? IoCheckmarkOutline : IoCopyOutline}
+                />
+            </Button>
+        </HStack>
+    );
+};

packages/dapp-kit-react-privy/src/components/AccountModal/Components/ActionButton.tsx

@@ -0,0 +1,93 @@
+import {
+    Button,
+    Box,
+    HStack,
+    VStack,
+    Text,
+    Icon,
+    Image,
+    Tag,
+} from '@chakra-ui/react';
+import { ElementType } from 'react';
+import { FadeInView } from '../../common';
+
+interface ActionButtonProps {
+    title: string;
+    description: string;
+    onClick: () => void;
+    leftIcon?: ElementType;
+    rightIcon?: ElementType;
+    leftImage?: string;
+    backgroundColor?: string;
+    border?: string;
+    hide?: boolean;
+    showComingSoon?: boolean;
+}
+
+export const ActionButton = ({
+    leftIcon,
+    rightIcon,
+    title,
+    description,
+    onClick,
+    leftImage,
+    hide = false,
+    showComingSoon = false,
+    backgroundColor,
+}: ActionButtonProps) => {
+    return (
+        <FadeInView>
+            <Button
+                w={'full'}
+                minH={'70px'}
+                h={'fit-content'}
+                py={4}
+                onClick={onClick}
+                display={hide ? 'none' : 'flex'}
+                isDisabled={showComingSoon}
+                bgColor={backgroundColor}
+            >
+                <HStack w={'full'} justify={'space-between'}>
+                    <Box minW={'40px'}>
+                        {leftImage ? (
+                            <Image src={leftImage} alt="left-image" />
+                        ) : (
+                            <Icon as={leftIcon} fontSize={'25px'} />
+                        )}
+                    </Box>
+                    <VStack
+                        textAlign={'left'}
+                        w={'full'}
+                        flex={1}
+                        justifyContent={'flex-start'}
+                        alignItems={'flex-start'}
+                    >
+                        <Text fontSize={'sm'} fontWeight={'400'}>
+                            {title}
+                        </Text>
+
+                        <Text
+                            fontSize={'xs'}
+                            fontWeight={'400'}
+                            opacity={0.5}
+                            overflowWrap={'break-word'}
+                            wordBreak={'break-word'}
+                            whiteSpace={'normal'}
+                            w={'full'}
+                        >
+                            {description}
+                        </Text>
+                        {showComingSoon && (
+                            <Tag size="sm" colorScheme="red">
+                                Coming Soon!
+                            </Tag>
+                        )}
+                    </VStack>
+                    <VStack minW={'40px'} justifyContent={'flex-end'}>
+                        <Icon as={rightIcon} fontSize={'20px'} opacity={0.5} />
+                    </VStack>
+                </HStack>
+            </Button>
+        </FadeInView>
+    );
+};

packages/dapp-kit-react-privy/src/components/AccountModal/Contents/MainContent.tsx

@@ -0,0 +1,88 @@
+import {
+    Button,
+    Container,
+    Image,
+    ModalBody,
+    ModalCloseButton,
+    ModalFooter,
+    ModalHeader,
+    VStack,
+    useColorMode,
+} from '@chakra-ui/react';
+import { useWallet, Wallet } from '../../../hooks';
+import { RxExit } from 'react-icons/rx';
+import { AddressDisplay, FadeInViewFromBottom } from '../../common';
+import { AccountModalContentTypes } from '../AccountModal';
+import { AccountSelector } from '../Components';
+
+type Props = {
+    setCurrentContent: React.Dispatch<
+        React.SetStateAction<AccountModalContentTypes>
+    >;
+    onClose: () => void;
+    wallet: Wallet;
+};
+
+export const MainContent = ({ setCurrentContent, onClose, wallet }: Props) => {
+    const { colorMode } = useColorMode();
+    const isDark = colorMode === 'dark';
+
+    const { disconnect, connection } = useWallet();
+
+    return (
+        <FadeInViewFromBottom>
+            <ModalHeader
+                fontSize={'md'}
+                fontWeight={'500'}
+                textAlign={'center'}
+                color={isDark ? '#dfdfdd' : '#4d4d4d'}
+            >
+                {'Account'}
+            </ModalHeader>
+            <VStack justify={'center'}>
+                <Image
+                    src={wallet.image}
+                    w="120px"
+                    h="120px"
+                    m={10}
+                    borderRadius="full"
+                    objectFit="cover"
+                />
+            </VStack>
+
+            <ModalCloseButton />
+
+            <Container maxW={'container.lg'}>
+                <ModalBody w={'full'}>
+                    <VStack w={'full'} spacing={5}>
+                        {connection.isConnectedWithPrivy ? (
+                            <AccountSelector
+                                onClick={() => {
+                                    setCurrentContent('accounts');
+                                }}
+                                wallet={wallet}
+                            />
+                        ) : (
+                            <AddressDisplay wallet={wallet} />
+                        )}
+
+                        <Button
+                            w={'full'}
+                            onClick={() => {
+                                disconnect();
+                                onClose();
+                            }}
+                            minH={'40px'}
+                            fontSize={'sm'}
+                            fontWeight={'400'}
+                            leftIcon={<RxExit color="#888888" />}
+                        >
+                            Logout
+                        </Button>
+                    </VStack>
+                </ModalBody>
+                <ModalFooter></ModalFooter>
+            </Container>
+        </FadeInViewFromBottom>
+    );
+};