Add Profile empty state

oasisprotocol · Sep 21, 2023 · 0367804 · 0367804
1 parent 8e35762
commit 0367804
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 4 deletions.
diff --git a/src/app/components/Toolbar/Features/Profile/__tests__/index.test.tsx b/src/app/components/Toolbar/Features/Profile/__tests__/index.test.tsx
@@ -8,7 +8,7 @@ const renderComponent = (store: any) =>
   render(
     <Provider store={store}>
       <ThemeProvider>
-        <Profile />
+        <Profile closeHandler={() => {}} />
       </ThemeProvider>
     </Provider>,
   )

diff --git a/src/app/components/Toolbar/Features/Profile/index.tsx b/src/app/components/Toolbar/Features/Profile/index.tsx
@@ -1,11 +1,61 @@
-import { useContext } from 'react'
+import { useContext, ReactNode } from 'react'
+import { useSelector } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
+import { Trans, useTranslation } from 'react-i18next'
 import { Box } from 'grommet/es6/components/Box'
+import { Button } from 'grommet/es6/components/Button'
 import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
+import { User } from 'grommet-icons/es6/icons/User'
+import { selectUnlockedStatus } from 'app/state/selectUnlockedStatus'
 import { UpdatePassword } from './UpdatePassword'
 import { layerOverlayMinHeight } from './../layer'
 
-export const Profile = () => {
+type ProfileEmptyStateProps = {
+  children: ReactNode
+}
+
+const ProfileEmptyState = ({ children }: ProfileEmptyStateProps) => (
+  <Box gap="medium" align="center" pad={{ top: 'large' }}>
+    <User size="36px" color="currentColor" />
+    <Box pad="large">{children}</Box>
+  </Box>
+)
+
+interface ProfileProps {
+  closeHandler: () => any
+}
+
+export const Profile = ({ closeHandler }: ProfileProps) => {
+  const { t } = useTranslation()
   const isMobile = useContext(ResponsiveContext) === 'small'
+  const unlockedStatus = useSelector(selectUnlockedStatus)
+  const isAvailable = unlockedStatus === 'unlockedProfile'
+  const navigate = useNavigate()
+
+  if (!isAvailable) {
+    return (
+      <ProfileEmptyState>
+        <Box style={{ display: 'block' }}>
+          <Trans
+            i18nKey="toolbar.profile.notAvailable"
+            t={t}
+            components={{
+              OpenWalletButton: (
+                <Button
+                  color="link"
+                  onClick={() => {
+                    closeHandler()
+                    navigate('/open-wallet')
+                  }}
+                />
+              ),
+            }}
+            defaults="You can setup your profile while <OpenWalletButton>opening a wallet</OpenWalletButton>."
+          />
+        </Box>
+      </ProfileEmptyState>
+    )
+  }
 
   return (
     <Box flex="grow" height={{ min: isMobile ? 'auto' : layerOverlayMinHeight }} pad={{ vertical: 'medium' }}>

diff --git a/src/app/components/Toolbar/Features/SettingsButton/index.tsx b/src/app/components/Toolbar/Features/SettingsButton/index.tsx
@@ -76,7 +76,7 @@ export const SettingsButton = memo(() => {
                 <Contacts closeHandler={hideLayer} />
               </Tab>
               <Tab data-testid="toolbar-profile-tab" title={t('toolbar.settings.profile', 'Profile')}>
-                <Profile />
+                <Profile closeHandler={hideLayer} />
               </Tab>
             </Tabs>
           </Box>

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -412,6 +412,7 @@
       "testnet": "Testnet"
     },
     "profile": {
+      "notAvailable": "You can setup your profile while <OpenWalletButton>opening a wallet</OpenWalletButton>.",
       "password": {
         "current": "Current password",
         "enterCurrent": "Enter your current password",