List contact accounts

src/app/components/Toolbar/Features/Contacts/ContactAccount.tsx

@@ -0,0 +1,71 @@
+import { useContext, useState } from 'react'
+import { useDispatch } from 'react-redux'
+import { useTranslation } from 'react-i18next'
+import { Box } from 'grommet/es6/components/Box'
+import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
+import { Tabs } from 'grommet/es6/components/Tabs'
+import { Tab } from 'grommet/es6/components/Tab'
+import { contactsActions } from 'app/state/contacts'
+import { Contact } from 'app/state/contacts/types'
+import { Account } from '../Account/Account'
+import { ResponsiveLayer } from '../../../ResponsiveLayer'
+import { ContactAccountForm } from './ContactAccountForm'
+
+interface ContactAccountProps {
+  contact: Contact
+}
+
+export const ContactAccount = ({ contact }: ContactAccountProps) => {
+  const { t } = useTranslation()
+  const [layerVisibility, setLayerVisibility] = useState(false)
+  const isMobile = useContext(ResponsiveContext) === 'small'
+  const dispatch = useDispatch()
+  const submitHandler = (contact: Contact) => dispatch(contactsActions.update(contact))
+
+  return (
+    <Box>
+      <Account
+        address={contact.address}
+        balance={undefined}
+        displayBalance={false}
+        displayManageButton={{
+          onClickManage: () => setLayerVisibility(true),
+        }}
+        isActive={false}
+        key={contact.address}
+        name={contact.name}
+        onClick={() => setLayerVisibility(true)}
+      />
+      {layerVisibility && (
+        <ResponsiveLayer
+          onClickOutside={() => setLayerVisibility(false)}
+          onEsc={() => setLayerVisibility(false)}
+          animation="none"
+          background="background-front"
+          modal
+          position="top"
+          margin={isMobile ? 'none' : 'xlarge'}
+        >
+          <Box margin="medium" width={isMobile ? 'auto' : '700px'}>
+            <Tabs alignControls="start">
+              <Tab title={t('toolbar.contacts.manage', 'Manage Contact')}>
+                <Box
+                  gap="small"
+                  pad={{ vertical: 'medium', right: 'small' }}
+                  overflow={{ vertical: 'auto' }}
+                  height="400px"
+                >
+                  <ContactAccountForm
+                    contact={contact}
+                    setLayerVisibility={setLayerVisibility}
+                    submitHandler={submitHandler}
+                  />
+                </Box>
+              </Tab>
+            </Tabs>
+          </Box>
+        </ResponsiveLayer>
+      )}
+    </Box>
+  )
+}

src/app/components/Toolbar/Features/Contacts/index.tsx

@@ -5,6 +5,7 @@ import { Box } from 'grommet/es6/components/Box'
 import { Button } from 'grommet/es6/components/Button'
 import { Inbox } from 'grommet-icons/es6/icons/Inbox'
 import { selectContactsList } from 'app/state/contacts/selectors'
+import { ContactAccount } from './ContactAccount'
 import { AddContact } from './AddContact'
 
 const ContactsListEmptyState = () => {
@@ -35,6 +36,11 @@ export const Contacts = () => {
           <ContactsListEmptyState />
         </Box>
       )}
+      {!!contacts.length && (
+        <Box flex="grow" gap="small">
+          {contacts?.map(contact => <ContactAccount key={contact.address} contact={contact} />)}
+        </Box>
+      )}
       <Box align="center">
         <Button
           primary

src/locales/en/translation.json

@@ -385,6 +385,7 @@
       "addContact": "Add Contact",
       "address": "Address",
       "cancel": "Cancel",
+      "manage": "Manage Contact",
       "name": "Name",
       "save": "Save",
       "validation": {