feat: address can be copied to clipboard (#105)

* 86-address-component-copiable: add chakra-ui packages as we will need to use a couple of icons

* 86-address-component-copiable: Update Address component to accept copiable boolean prop - make sure we copy input value to clipboard when clicking on input - display icons at far right of the input when copiable is set to true as well as a feedback check mark when copied

* 86-address-component-copiable: Add new story for the Address component with copiable set to true - add tests to make sure input is copiable

* create changeset - minor bump

* merge main into feat/address-component-copiable

* add comment as to why we are assigning navigator to global object

* we only show the copy-to-clipbaord success state for 2 seconds before going back to default state

* address input should be readOnly for now as we are not using onChange handler

* we should copy the props.value instead of the input.value as it could be shortened and it makes more sense to copy the FULL address

* Address input should display pointer cursor when copiable

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

Author: maximebonhomme

.changeset/chilly-jokes-nail.md

@@ -0,0 +1,5 @@
+---
+'@web3-ui/components': minor
+---
+
+Address component now accept copiable prop to allow users to copy the address value into their clipboard

packages/components/package.json

@@ -29,6 +29,7 @@
   "types": "dist/web3-ui-components.cjs.d.ts",
   "dependencies": {
     "@babel/runtime": "^7.16.3",
+    "@chakra-ui/icons": "^1.1.1",
     "@chakra-ui/react": "^1.7.2",
     "@emotion/core": "^11.0.0",
     "@emotion/react": "^11",

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

@@ -27,6 +27,7 @@ const AddressUsingProvider = (props: AddressProps) => {
   return (
     <>
       <Address
+        copiable
         value={connected ? connection.ens || connection.userAddress || '' : 'Not connected'}
         shortened={props.shortened}
       />
@@ -46,3 +47,5 @@ export const WithWalletShortened = () => (
     <AddressUsingProvider shortened />
   </Provider>
 );
+
+export const CanBeCopied = () => <Address value='0x00000000000000' copiable />;

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

@@ -1,13 +1,53 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { jest } from '@jest/globals';
+import { render, fireEvent, waitFor } 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.
+ */
+Object.assign(navigator, {
+  clipboard: {
+    writeText: () => {},
+  },
+});
+
 describe('Address', () => {
   it('renders without throwing', () => {
-    const { container } = render(<Address value='taylorswift.eth' shortened={false} />);
+    const { container } = render(<Address value='taylorswift.eth' />);
+    expect(container).toBeInTheDocument();
+  });
+});
+
+describe('Address copiable prop true', () => {
+  it('renders without throwing', () => {
+    const { container } = render(<Address copiable value='taylorswift.eth' />);
     expect(container).toBeInTheDocument();
   });
+
+  it('renders with icon', () => {
+    const { container } = render(<Address copiable value='taylorswift.eth' />);
+    const svg = container.querySelector('svg') as SVGElement;
+
+    expect(svg).toBeInTheDocument();
+  });
+
+  it('uses writeText from Clipboard API', async () => {
+    const { container } = render(<Address copiable value='taylorswift.eth' />);
+    const input = container.querySelector('input') as HTMLElement;
+
+    jest.spyOn(navigator.clipboard, 'writeText');
+
+    fireEvent.click(input);
+
+    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 />);

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

@@ -1,21 +1,43 @@
-import { Input } from '@chakra-ui/react';
-import React, { FC } from 'react';
+import {
+  FormControl,
+  FormErrorMessage,
+  Input,
+  InputGroup,
+  InputRightElement,
+} from '@chakra-ui/react';
+import { CopyIcon, CheckIcon } from '@chakra-ui/icons';
+import React, { useState, useEffect } from 'react';
 
 export interface AddressProps {
   /**
    * The address to display
    */
   value: string;
+  /**
+   * Whether the address can be copied or not
+   */
+  copiable?: boolean;
   /**
    * Shorten the address if it does not resolve to an ENS name
    */
   shortened?: boolean;
 }
 
+interface EventTarget {
+  value: string;
+}
+
+interface SyntheticEvent {
+  currentTarget: EventTarget;
+}
+
 /**
  * A component to display an address
  */
-export const Address: FC<AddressProps> = ({ value, shortened = false }) => {
+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;
 
   if (shortened) {
@@ -32,5 +54,43 @@ export const Address: FC<AddressProps> = ({ value, shortened = false }) => {
     displayAddress = value;
   }
 
-  return <Input value={displayAddress} />;
+  const handleClick = async (event: SyntheticEvent): Promise<void> => {
+    if (copiable && value) {
+      try {
+        await navigator.clipboard.writeText(value);
+        setError(null);
+        setCopied(true);
+
+        feedbackTimeOut = setTimeout(() => {
+          setCopied(false);
+        }, 2000);
+      } catch (error) {
+        setError(error as string);
+      }
+    }
+  };
+
+  useEffect(() => {
+    return () => clearTimeout(feedbackTimeOut);
+  }, []);
+
+  return (
+    <FormControl isInvalid={!!error}>
+      <InputGroup>
+        {copiable && (
+          <InputRightElement
+            pointerEvents='none'
+            children={copied ? <CheckIcon color='green.500' /> : <CopyIcon color='gray.300' />}
+          />
+        )}
+        <Input
+          onClick={handleClick}
+          value={displayAddress}
+          cursor={copiable ? 'pointer' : 'initial'}
+          readOnly
+        />
+      </InputGroup>
+      <FormErrorMessage>{error}</FormErrorMessage>
+    </FormControl>
+  );
 };

yarn.lock

@@ -1333,6 +1333,14 @@
   dependencies:
     "@chakra-ui/utils" "1.9.1"
 
+"@chakra-ui/icons@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/icons/-/icons-1.1.1.tgz#e4b191fd38be999c4434ff2b1fb69a5eaf3cf226"
+  integrity sha512-/+u6euCOFw6J1DZW7NcVFtib4mygJBoqRdsKiU1Z3uiTC+zQTBzcCt54NQ+kK8rhuNzJ+odahnt/AbjBJgZ+5A==
+  dependencies:
+    "@chakra-ui/icon" "1.2.1"
+    "@types/react" "^17.0.15"
+
 "@chakra-ui/[email protected]":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@chakra-ui/image/-/image-1.1.1.tgz#39ecb77155e9e1fbbc68e825eb46405808805a8c"
@@ -4369,7 +4377,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^17.0.36":
+"@types/react@*", "@types/react@^17.0.15", "@types/react@^17.0.36":
   version "17.0.37"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.37.tgz#6884d0aa402605935c397ae689deed115caad959"
   integrity sha512-2FS1oTqBGcH/s0E+CjrCCR9+JMpsu9b69RTFO+40ua43ZqP5MmQ4iUde/dMjWR909KxZwmOQIFq6AV6NjEG5xg==