fix: use Text for Address instead of Input (#132)

* Address component should not use an input element to display the address - we are now using Text - removed onclick types as we are not using event argument anymore

* changeset patch created

* update Address tests

* replace input wording by addressContainer for consistency

Co-authored-by: Maxime Bonhomme <[email protected]>

Author: maximebonhomme

.changeset/tiny-teachers-taste.md

@@ -0,0 +1,5 @@
+---
+'@web3-ui/components': patch
+---
+
+Address component now uses Text component instead of unnecesary Input

packages/components/src/components/Address/Address.test.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { jest } from '@jest/globals';
-import { render, fireEvent, waitFor } from '@testing-library/react';
+import { render, fireEvent, waitFor, getByTestId } from '@testing-library/react';
 
 import { Address } from './Address';
 
 /**
  * We need to mock the Clipboard API by creating a global navigator object.
- * 
+ *
  * We're assigning an empty function to `writeText`
  * as we're only testing if it has been called with specific argument.
  */
@@ -38,20 +38,19 @@ describe('Address copiable prop true', () => {
 
   it('uses writeText from Clipboard API', async () => {
     const { container } = render(<Address copiable value='taylorswift.eth' />);
-    const input = container.querySelector('input') as HTMLElement;
+    const addressContainer = getByTestId(container, 'address-container');
 
     jest.spyOn(navigator.clipboard, 'writeText');
 
-    fireEvent.click(input);
+    fireEvent.click(addressContainer);
 
     await waitFor(() => {
       expect(navigator.clipboard.writeText).toHaveBeenCalledWith('taylorswift.eth');
     });
   });
-  
+
   it('checks the length of the address when shortened', () => {
     const { container } = render(<Address value='0x00000000000000' shortened />);
-    const addressInput = container.querySelector('input') as HTMLInputElement;
-    expect(addressInput).toHaveValue('0x00...0000');
+    expect(container.textContent).toContain('0x00...0000');
   });
 });

packages/components/src/components/Address/Address.tsx

@@ -1,10 +1,4 @@
-import {
-  FormControl,
-  FormErrorMessage,
-  Input,
-  InputGroup,
-  InputRightElement,
-} from '@chakra-ui/react';
+import { Box, Flex, FormControl, FormErrorMessage, Text } from '@chakra-ui/react';
 import { CopyIcon, CheckIcon } from '@chakra-ui/icons';
 import React, { useState, useEffect } from 'react';
 
@@ -23,38 +17,26 @@ export interface AddressProps {
   shortened?: boolean;
 }
 
-interface EventTarget {
-  value: string;
-}
-
-interface SyntheticEvent {
-  currentTarget: EventTarget;
-}
-
 /**
  * A component to display an address
  */
 export const Address: React.FC<AddressProps> = ({ value, copiable = false, shortened = false }) => {
   const [error, setError] = useState<null | string>(null);
   const [copied, setCopied] = useState<boolean>(false);
   let feedbackTimeOut: ReturnType<typeof setTimeout>;
-  let displayAddress: string;
+  let displayAddress: string = value;
 
   if (shortened) {
-    if (value.includes('.eth')) {
-      displayAddress = value;
-    } else if (value === '' || value === 'Not connected') {
+    if (value.includes('.eth') || value === '' || value === 'Not connected') {
       displayAddress = value;
     } else {
       displayAddress = `${value.substring(0, 4)}...${value.substring(
         value.length - 4
       )}`.toLowerCase();
     }
-  } else {
-    displayAddress = value;
   }
 
-  const handleClick = async (event: SyntheticEvent): Promise<void> => {
+  const handleClick = async (): Promise<void> => {
     if (copiable && value) {
       try {
         await navigator.clipboard.writeText(value);
@@ -76,20 +58,19 @@ export const Address: React.FC<AddressProps> = ({ value, copiable = false, short
 
   return (
     <FormControl isInvalid={!!error}>
-      <InputGroup>
+      <Flex
+        data-testid='address-container'
+        alignItems='center'
+        cursor={copiable ? 'pointer' : 'initial'}
+        onClick={handleClick}
+      >
+        <Text>{displayAddress}</Text>
         {copiable && (
-          <InputRightElement
-            pointerEvents='none'
-            children={copied ? <CheckIcon color='green.500' /> : <CopyIcon color='gray.300' />}
-          />
+          <Box ml='auto'>
+            {copied ? <CheckIcon color='green.500' /> : <CopyIcon color='gray.300' />}
+          </Box>
         )}
-        <Input
-          onClick={handleClick}
-          value={displayAddress}
-          cursor={copiable ? 'pointer' : 'initial'}
-          readOnly
-        />
-      </InputGroup>
+      </Flex>
       <FormErrorMessage>{error}</FormErrorMessage>
     </FormControl>
   );