Add pop-up notifs + show a notif when an address has been copied

src/app/components/AddressBox/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,158 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<AddressBox /> 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;
+  }
+}
+
+<div>
+  <div
+    class="c0"
+  >
+    <button
+      class="c1"
+      data-testid="copy-address"
+      type="button"
+    >
+      <svg
+        aria-label="Copy"
+        class="c2"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M9 15h8-8zm0-4h10H9zm0-4h4-4zm7-6v6h6M6 5H2v18h16v-4m4 0H6V1h11l5 5v13z"
+          fill="none"
+          stroke="#000"
+          stroke-width="2"
+        />
+      </svg>
+    </button>
+    <span
+      class="c3"
+    >
+      oasis1 qqur xkga vtcj jytn eume clx5 9ds3 avja qg7f tqph
+    </span>
+  </div>
+</div>
+`;

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(<AddressBox address={testAddress} />)
+
+describe('<AddressBox />', () => {
+  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()
+  })
+})

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 (
     <Box direction="row" align="center" round="5px" pad={{ right: 'small' }} width="fit-content">
-      <Button onClick={() => copyAddress()} icon={<Copy size="18px" />} />
+      <Button onClick={() => copyAddress()} icon={<Copy size="18px" />} data-testid="copy-address" />
       <Text weight="bold" size="medium" wordBreak="break-word">
         <PrettyAddress address={address} />
       </Text>
+      {notificationVisible && (
+        <Notification
+          toast
+          status={'normal'}
+          title={t('account.addressCopied', 'Address copied.')}
+          onClose={hideNotification}
+        />
+      )}
     </Box>
   )
 })

src/app/components/Transaction/InfoBox.tsx

@@ -1,8 +1,10 @@
-import { Box, Text } from 'grommet'
+import { Box, Text, Notification } from 'grommet'
 import * as React from 'react'
 import type { Icon } from 'grommet-icons'
 import copy from 'copy-to-clipboard'
 import { trimLongString } from '../ShortAddress'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 
 interface InfoBoxProps {
   copyToClipboard?: boolean
@@ -13,13 +15,26 @@ interface InfoBoxProps {
 }
 
 export function InfoBox({ copyToClipboard, icon: IconComponent, label, trimValue, value }: InfoBoxProps) {
+  const { t } = useTranslation()
+  const [notificationVisible, setNotificationVisible] = useState(false)
+
+  const hideNotification = () => setNotificationVisible(false)
+
+  const copyValue = () => {
+    if (!copyToClipboard) return
+    const wasCopied = copy(value)
+    if (wasCopied) {
+      setNotificationVisible(true)
+    }
+  }
+
   return (
     <Box
       direction="row"
       gap="small"
       hoverIndicator={{ color: 'background-contrast' }}
       pad={{ horizontal: 'small', vertical: 'small' }}
-      onClick={copyToClipboard ? () => copy(value) : undefined}
+      onClick={copyValue}
     >
       <Box fill="vertical" align="center" justify="center" alignSelf="center" pad={{ right: 'xsmall' }}>
         <IconComponent color="brand" size="20px" />
@@ -29,6 +44,14 @@ export function InfoBox({ copyToClipboard, icon: IconComponent, label, trimValue
         <Text weight="bold">{label}</Text>
         <Text>{trimValue ? trimLongString(value) : value}</Text>
       </Box>
+      {notificationVisible && (
+        <Notification
+          toast
+          status={'normal'}
+          title={t('infoBox.valueCopied', '{{ label }} copied.', { label })}
+          onClose={hideNotification}
+        />
+      )}
     </Box>
   )
 }