From 7f7cd5e634c26ecbbe5a17f25e6bc0cbc5772cab Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Fri, 15 Sep 2023 09:02:17 +0200
Subject: [PATCH] Make Contacts available only when profile exists

---
 .../Contacts/__tests__/index.test.tsx         | 26 +++++++++++++-
 .../Toolbar/Features/Contacts/index.tsx       | 36 +++++++++++++------
 src/locales/en/translation.json               |  1 +
 3 files changed, 52 insertions(+), 11 deletions(-)

diff --git a/src/app/components/Toolbar/Features/Contacts/__tests__/index.test.tsx b/src/app/components/Toolbar/Features/Contacts/__tests__/index.test.tsx
index b5d7603ce4..1704dfad14 100644
--- a/src/app/components/Toolbar/Features/Contacts/__tests__/index.test.tsx
+++ b/src/app/components/Toolbar/Features/Contacts/__tests__/index.test.tsx
@@ -3,6 +3,8 @@ import userEvent from '@testing-library/user-event'
 import { Provider } from 'react-redux'
 import { configureAppStore } from 'store/configureStore'
 import { ThemeProvider } from 'styles/theme/ThemeProvider'
+import { Wallet } from 'app/state/wallet/types'
+import { PersistState } from 'app/state/persist/types'
 import { Contacts } from '../'
 
 const renderComponent = (store: any) =>
@@ -17,12 +19,34 @@ const renderComponent = (store: any) =>
 describe('<Contacts  />', () => {
   let store: ReturnType<typeof configureAppStore>
 
+  const unlockedProfile = {
+    wallet: {
+      selectedWallet: 'dummy',
+      wallets: {
+        dummy: {
+          address: 'dummy',
+        } as Wallet,
+      },
+    },
+    persist: {
+      hasPersistedProfiles: true,
+      stringifiedEncryptionKey: 'unlockedProfile',
+    } as PersistState,
+  }
+
   beforeEach(() => {
-    store = configureAppStore()
+    store = configureAppStore(unlockedProfile)
+  })
+
+  it('should render unavailable state', () => {
+    renderComponent(configureAppStore({}))
+    expect(screen.getByText('toolbar.contacts.notAvailable')).toBeInTheDocument()
+    expect(screen.queryByText('toolbar.contacts.add')).not.toBeInTheDocument()
   })
 
   it('should match snapshot', () => {
     const storeWithContacts = configureAppStore({
+      ...unlockedProfile,
       contacts: {
         oasis1qq2vzcvxn0js5unsch5me2xz4kr43vcasv0d5eq4: {
           address: 'oasis1qq2vzcvxn0js5unsch5me2xz4kr43vcasv0d5eq4',
diff --git a/src/app/components/Toolbar/Features/Contacts/index.tsx b/src/app/components/Toolbar/Features/Contacts/index.tsx
index 76d7e3a0e4..c51221c6fb 100644
--- a/src/app/components/Toolbar/Features/Contacts/index.tsx
+++ b/src/app/components/Toolbar/Features/Contacts/index.tsx
@@ -6,32 +6,48 @@ import { Button } from 'grommet/es6/components/Button'
 import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
 import { Inbox } from 'grommet-icons/es6/icons/Inbox'
 import { selectContactsList } from 'app/state/contacts/selectors'
+import { selectIsLockableOrCloseable } from 'app/state/selectIsLockableOrCloseable'
 import { ContactAccount } from './ContactAccount'
 import { AddContact } from './AddContact'
 import { layerScrollableAreaHeight } from './layer'
 
-const ContactsListEmptyState = () => {
-  const { t } = useTranslation()
-
-  return (
-    <Box gap="medium" align="center" pad={{ top: 'large' }}>
-      <Inbox size="36px" color="currentColor" />
-      <Box pad="large">{t('toolbar.contacts.emptyList', 'You have no contacts yet.')}</Box>
-    </Box>
-  )
+type ContactsListEmptyStateProps = {
+  description: string
 }
 
+const ContactsListEmptyState = ({ description }: ContactsListEmptyStateProps) => (
+  <Box gap="medium" align="center" pad={{ top: 'large' }}>
+    <Inbox size="36px" color="currentColor" />
+    <Box pad="large">{description}</Box>
+  </Box>
+)
+
 export const Contacts = () => {
   const { t } = useTranslation()
   const [layerVisibility, setLayerVisibility] = useState(false)
   const contacts = useSelector(selectContactsList)
+  const isLockableOrCloseable = useSelector(selectIsLockableOrCloseable)
   const isMobile = useContext(ResponsiveContext) === 'small'
+  const isAvailable = isLockableOrCloseable === 'lockable'
+
+  if (!isAvailable) {
+    return (
+      <ContactsListEmptyState
+        description={t(
+          'toolbar.contacts.notAvailable',
+          'To use Contacts please create a profile while opening a wallet.',
+        )}
+      />
+    )
+  }
 
   return (
     <>
       {!contacts.length && (
         <Box justify="center" flex="grow" height={isMobile ? 'auto' : layerScrollableAreaHeight}>
-          <ContactsListEmptyState />
+          <ContactsListEmptyState
+            description={t('toolbar.contacts.emptyList', 'You have no contacts yet.')}
+          />
         </Box>
       )}
       {!!contacts.length && (
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index cb7e4aebd8..774940763c 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -397,6 +397,7 @@
       "emptyList": "You have no contacts yet.",
       "manage": "Manage Contact",
       "name": "Name",
+      "notAvailable": "To use Contacts please create a profile while opening a wallet.",
       "save": "Save",
       "validation": {
         "addressError": "Please enter a valid wallet address",