Make Contacts available only when profile exists

oasisprotocol · Sep 15, 2023 · d64ca39 · d64ca39
1 parent 17ae7cb
commit d64ca39
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 34 deletions.
diff --git a/playwright/tests/syncTabs.spec.ts b/playwright/tests/syncTabs.spec.ts
@@ -143,16 +143,6 @@ test.describe('syncTabs', () => {
   })
 
   test.describe('adding and removing contacts in tabs', () => {
-    test('unpersisted', async ({ page, context }) => {
-      await page.goto('/open-wallet/private-key')
-      await fillPrivateKeyWithoutPassword(page, {
-        persistenceCheckboxChecked: false,
-        persistenceCheckboxDisabled: false,
-      })
-      const tab2 = await context.newPage()
-      await testSyncingContacts(page, tab2)
-    })
-
     test('persisted', async ({ page, context }) => {
       await addPersistedStorage(page)
       await page.goto('/')
@@ -162,19 +152,6 @@ test.describe('syncTabs', () => {
       await testSyncingContacts(page, tab2)
     })
 
-    test('incognito', async ({ page, context }) => {
-      await addPersistedStorage(page)
-      await page.goto('/')
-      await page.getByRole('button', { name: 'Continue without the profile' }).click()
-      const tab2 = await context.newPage()
-      await tab2.goto('/open-wallet/private-key')
-      await fillPrivateKeyWithoutPassword(tab2, {
-        persistenceCheckboxChecked: false,
-        persistenceCheckboxDisabled: true,
-      })
-      await testSyncingContacts(page, tab2)
-    })
-
     async function testSyncingContacts(page: Page, tab2: Page) {
       await page.getByTestId('account-selector').click()
       await page.getByTestId('toolbar-contacts-tab').click()

diff --git 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
@@ -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
@@ -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",