fix: show address display if connected with veworld

vechain · Dec 20, 2024 · e121954 · e121954
1 parent 7e15bd3
commit e121954
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 15 deletions.
diff --git a/...kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Contents/MainContent.tsx b/...kit-react-privy/src/DAppKitPrivyProvider/components/AccountModal/Contents/MainContent.tsx
@@ -11,7 +11,11 @@ import {
 } from '@chakra-ui/react';
 import { useWallet, Wallet } from '../../../hooks';
 import { RxExit } from 'react-icons/rx';
-import { AccountSelector, FadeInViewFromBottom } from '../../common';
+import {
+    AccountSelector,
+    AddressDisplay,
+    FadeInViewFromBottom,
+} from '../../common';
 import { AccountModalContentTypes } from '../AccountModal';
 import packageJson from '../../../../../package.json';
 
@@ -48,12 +52,16 @@ export const MainContent = ({ setCurrentContent, onClose, wallet }: Props) => {
                     borderRadius="full"
                     objectFit="cover"
                 />
-                <AccountSelector
-                    onClick={() => {
-                        setCurrentContent('accounts');
-                    }}
-                    wallet={wallet}
-                />
+                {connection.isConnectedWithPrivy ? (
+                    <AccountSelector
+                        onClick={() => {
+                            setCurrentContent('accounts');
+                        }}
+                        wallet={wallet}
+                    />
+                ) : (
+                    <AddressDisplay wallet={wallet} />
+                )}
             </VStack>
 
             <ModalCloseButton />

diff --git a/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/common/AddressDisplay.tsx b/packages/dapp-kit-react-privy/src/DAppKitPrivyProvider/components/common/AddressDisplay.tsx
@@ -14,8 +14,12 @@ type Props = {
 
 export const AddressDisplay = ({ wallet, label, size = 'lg' }: Props) => {
     const [copied, setCopied] = useState(false);
+    const [copiedDomain, setCopiedDomain] = useState(false);
 
-    const copyToClipboard = async (textToCopy: string) => {
+    const copyToClipboard = async (
+        textToCopy: string,
+        setCopied: (value: boolean) => void,
+    ) => {
         await navigator.clipboard.writeText(textToCopy);
         setCopied(true);
         setTimeout(() => {
@@ -39,17 +43,37 @@ export const AddressDisplay = ({ wallet, label, size = 'lg' }: Props) => {
                             </Text>
                             <Icon
                                 boxSize={4}
+                                aria-label="Copy Domain"
+                                as={
+                                    copiedDomain
+                                        ? IoCheckmarkOutline
+                                        : IoCopyOutline
+                                }
+                                cursor="pointer"
+                                onClick={() =>
+                                    copyToClipboard(
+                                        wallet.domain || '',
+                                        setCopiedDomain,
+                                    )
+                                }
+                            />
+                        </HStack>
+                        <HStack>
+                            <Text fontSize={'sm'}>
+                                {'('}
+                                {humanAddress(wallet.address, 8, 7)}
+                                {')'}
+                            </Text>
+                            <Icon
+                                boxSize={3}
                                 aria-label="Copy Address"
                                 as={copied ? IoCheckmarkOutline : IoCopyOutline}
                                 cursor="pointer"
-                                onClick={() => copyToClipboard(wallet.address)}
+                                onClick={() =>
+                                    copyToClipboard(wallet.address, setCopied)
+                                }
                             />
                         </HStack>
-                        <Text fontSize={'sm'}>
-                            {'('}
-                            {humanAddress(wallet.address, 8, 7)}
-                            {')'}
-                        </Text>
                     </VStack>
                 ) : (
                     <HStack>
@@ -61,7 +85,9 @@ export const AddressDisplay = ({ wallet, label, size = 'lg' }: Props) => {
                             aria-label="Copy Address"
                             as={copied ? IoCheckmarkOutline : IoCopyOutline}
                             cursor="pointer"
-                            onClick={() => copyToClipboard(wallet.address)}
+                            onClick={() =>
+                                copyToClipboard(wallet.address, setCopied)
+                            }
                         />
                     </HStack>
                 )}