diff --git a/src/app/components/AddressBox/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/AddressBox/__tests__/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000000..c18100c9cd --- /dev/null +++ b/src/app/components/AddressBox/__tests__/__snapshots__/index.test.tsx.snap @@ -0,0 +1,158 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should render address properly 1`] = ` +.c2 { + display: inline-block; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: 18px; + height: 18px; + fill: #666666; + stroke: #666666; +} + +.c2 g { + fill: inherit; + stroke: inherit; +} + +.c2 *:not([stroke])[fill="none"] { + stroke-width: 0; +} + +.c2 *[stroke*="#"],.c2 *[STROKE*="#"] { + stroke: inherit; + fill: none; +} + +.c2 *[fill-rule], +.c2 *[FILL-RULE], +.c2 *[fill*="#"],.c2 *[FILL*="#"] { + fill: inherit; + stroke: none; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + box-sizing: border-box; + max-width: 100%; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-width: 0; + min-height: 0; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + padding-right: 12px; + border-radius: 5px; +} + +.c3 { + font-size: 18px; + line-height: 24px; + font-weight: bold; + word-break: break-word; +} + +.c1 { + display: inline-block; + box-sizing: border-box; + cursor: pointer; + font: inherit; + -webkit-text-decoration: none; + text-decoration: none; + margin: 0; + background: transparent; + overflow: visible; + text-transform: none; + color: inherit; + outline: none; + border: none; + padding: 0; + text-align: inherit; + line-height: 0; + padding: 12px; +} + +.c1:focus { + outline: none; + box-shadow: 0 0 2px 2px #6FFFB0; +} + +.c1:focus > circle, +.c1:focus > ellipse, +.c1:focus > line, +.c1:focus > path, +.c1:focus > polygon, +.c1:focus > polyline, +.c1:focus > rect { + outline: none; + box-shadow: 0 0 2px 2px #6FFFB0; +} + +.c1:focus::-moz-focus-inner { + border: 0; +} + +.c1:focus:not(:focus-visible) { + outline: none; + box-shadow: none; +} + +.c1:focus:not(:focus-visible) > circle,.c1:focus:not(:focus-visible) > ellipse, +.c1:focus:not(:focus-visible) > line,.c1:focus:not(:focus-visible) > path, +.c1:focus:not(:focus-visible) > polygon,.c1:focus:not(:focus-visible) > polyline, +.c1:focus:not(:focus-visible) > rect { + outline: none; + box-shadow: none; +} + +.c1:focus:not(:focus-visible)::-moz-focus-inner { + border: 0; +} + +@media only screen and (max-width:768px) { + .c0 { + padding-right: 6px; + } +} + +
+
+ + + oasis1 qqur xkga vtcj jytn eume clx5 9ds3 avja qg7f tqph + +
+
+`; diff --git a/src/app/components/AddressBox/__tests__/index.test.tsx b/src/app/components/AddressBox/__tests__/index.test.tsx new file mode 100644 index 0000000000..79aa6351f4 --- /dev/null +++ b/src/app/components/AddressBox/__tests__/index.test.tsx @@ -0,0 +1,33 @@ +import * as React from 'react' +import copy from 'copy-to-clipboard' +import { screen } from '@testing-library/dom' +import { render } from '@testing-library/react' +import userEvent from '@testing-library/user-event' + +import { AddressBox } from '../index' + +jest.mock('copy-to-clipboard') + +const testAddress = 'oasis1qqurxkgavtcjjytneumeclx59ds3avjaqg7ftqph' + +const renderComponent = () => render() + +describe('', () => { + it('should render address properly', () => { + const { container } = renderComponent() + expect(container).toMatchSnapshot() + }) + + it('should be able to copy address to clipboard', async () => { + renderComponent() + await userEvent.click(screen.getByTestId('copy-address')) + expect(copy).toHaveBeenCalledWith(testAddress) + }) + + it('should be able to show a notification', async () => { + renderComponent() + jest.mocked(copy).mockReturnValue(true) // Copy must return true so that the notification is actually displayed + await userEvent.click(screen.getByTestId('copy-address')) + expect(await screen.getByText('account.addressCopied')).toBeInTheDocument() + }) +}) diff --git a/src/app/components/AddressBox/index.tsx b/src/app/components/AddressBox/index.tsx index 3fd5489813..c97151f9cb 100644 --- a/src/app/components/AddressBox/index.tsx +++ b/src/app/components/AddressBox/index.tsx @@ -4,9 +4,10 @@ * */ import copy from 'copy-to-clipboard' -import { Box, Button, Text } from 'grommet' +import { Box, Button, Text, Notification } from 'grommet' import { Copy } from 'grommet-icons' -import React, { memo } from 'react' +import React, { memo, useState } from 'react' +import { useTranslation } from 'react-i18next' import { PrettyAddress } from '../PrettyAddress' @@ -15,18 +16,34 @@ interface Props { } export const AddressBox = memo((props: Props) => { + const { t } = useTranslation() + const [notificationVisible, setNotificationVisible] = useState(false) + + const hideNotification = () => setNotificationVisible(false) + const address = props.address const copyAddress = () => { - copy(address) + const wasCopied = copy(address) + if (wasCopied) { + setNotificationVisible(true) + } } return ( -