Merge pull request #1624 from oasisprotocol/lw/to-support-deleting-acc

Small refactoring to later support deleting accounts

src/app/components/Footer/__tests__/index.test.tsx

@@ -31,7 +31,6 @@ describe('<Footer />', () => {
 
     store = configureAppStore({
       wallet: {
-        isOpen: true,
         selectedWallet: 'dummy',
         wallets: {
           dummy: {

src/app/components/Footer/index.tsx

@@ -5,7 +5,7 @@ import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
 import React, { memo } from 'react'
 import { useSelector } from 'react-redux'
 import { Trans, useTranslation } from 'react-i18next'
-import { selectIsOpen } from 'app/state/wallet/selectors'
+import { selectHasAccounts } from 'app/state/wallet/selectors'
 import { intlDateTimeFormat } from '../DateFormatter/intlDateTimeFormat'
 import { backend } from 'vendors/backend'
 import { BackendAPIs } from 'config'
@@ -20,7 +20,7 @@ function NoReleaseLink() {
 }
 
 export const Footer = memo(() => {
-  const isAccountOpen = useSelector(selectIsOpen)
+  const walletHasAccounts = useSelector(selectHasAccounts)
   const isMobile = React.useContext(ResponsiveContext) === 'small'
   const { t } = useTranslation()
 
@@ -44,7 +44,7 @@ export const Footer = memo(() => {
       pad={{
         horizontal: 'medium',
         top: isMobile ? '1rem' : 'medium',
-        bottom: isMobile && isAccountOpen ? mobileFooterNavigationHeight : 'none',
+        bottom: isMobile && walletHasAccounts ? mobileFooterNavigationHeight : 'none',
       }}
       margin={{ bottom: 'large' }}
     >
@@ -102,7 +102,7 @@ export const Footer = memo(() => {
         </Text>
       )}
 
-      <MobileFooterNavigation isAccountOpen={isAccountOpen} isMobile={isMobile} />
+      <MobileFooterNavigation walletHasAccounts={walletHasAccounts} isMobile={isMobile} />
     </Box>
   )
 })

src/app/components/MobileFooterNavigation/__tests__/index.test.tsx

@@ -12,11 +12,11 @@ import { MobileFooterNavigation, MobileFooterNavigationProps } from '..'
 
 jest.mock('../../../pages/ParaTimesPage/useParaTimesNavigation')
 
-const renderComponent = (store: any, { isAccountOpen, isMobile }: MobileFooterNavigationProps) =>
+const renderComponent = (store: any, { walletHasAccounts, isMobile }: MobileFooterNavigationProps) =>
   render(
     <Provider store={store}>
       <MemoryRouter>
-        <MobileFooterNavigation isAccountOpen={isAccountOpen} isMobile={isMobile} />
+        <MobileFooterNavigation walletHasAccounts={walletHasAccounts} isMobile={isMobile} />
       </MemoryRouter>
     </Provider>,
   )
@@ -33,7 +33,6 @@ describe('<MobileFooterNavigation />', () => {
     jest.mocked(useParaTimesNavigation).mockReturnValue(mockUseParaTimesNavigationResult)
     store = configureAppStore({
       wallet: {
-        isOpen: true,
         selectedWallet: 'dummy',
         wallets: {
           dummy: {
@@ -45,20 +44,20 @@ describe('<MobileFooterNavigation />', () => {
   })
 
   it('should render component for mobile and when account is open', () => {
-    renderComponent(store, { isAccountOpen: true, isMobile: true })
+    renderComponent(store, { walletHasAccounts: true, isMobile: true })
 
     expect(screen.getByTestId('mobile-footer-navigation')).toBeInTheDocument()
     expect(screen.queryByText('MockParaTimesLabel')).not.toBeInTheDocument()
   })
 
   it('should not render component for non mobile', () => {
-    renderComponent(store, { isAccountOpen: true, isMobile: false })
+    renderComponent(store, { walletHasAccounts: true, isMobile: false })
 
     expect(screen.queryByTestId('mobile-footer-navigation')).not.toBeInTheDocument()
   })
 
   it('should not render component when account is not open', () => {
-    renderComponent(store, { isAccountOpen: false, isMobile: true })
+    renderComponent(store, { walletHasAccounts: false, isMobile: true })
 
     expect(screen.queryByTestId('mobile-footer-navigation')).not.toBeInTheDocument()
   })
@@ -68,7 +67,7 @@ describe('<MobileFooterNavigation />', () => {
       ...mockUseParaTimesNavigationResult,
       canAccessParaTimesRoute: true,
     })
-    renderComponent(store, { isAccountOpen: true, isMobile: true })
+    renderComponent(store, { walletHasAccounts: true, isMobile: true })
 
     expect(screen.getByText('MockParaTimesLabel')).toBeInTheDocument()
     expect(screen.getByLabelText('Inherit')).toBeInTheDocument()

src/app/components/MobileFooterNavigation/index.tsx

@@ -33,11 +33,11 @@ const StyledMobileFooterNavigation = styled.nav`
 `
 
 export interface MobileFooterNavigationProps {
-  isAccountOpen: boolean
+  walletHasAccounts: boolean
   isMobile: boolean
 }
 
-export const MobileFooterNavigation = ({ isAccountOpen, isMobile }: MobileFooterNavigationProps) => {
+export const MobileFooterNavigation = ({ walletHasAccounts, isMobile }: MobileFooterNavigationProps) => {
   const { t } = useTranslation()
   const address = useSelector(selectAddress)
   const { canAccessParaTimesRoute, getParaTimesRoutePath, paraTimesRouteLabel } = useParaTimesNavigation()
@@ -75,7 +75,7 @@ export const MobileFooterNavigation = ({ isAccountOpen, isMobile }: MobileFooter
     return menuItems
   }, [address, canAccessParaTimesRoute, getParaTimesRoutePath, paraTimesRouteLabel, t])
 
-  if (!isMobile || !isAccountOpen) {
+  if (!isMobile || !walletHasAccounts) {
     return null
   }
 

src/app/components/Sidebar/__tests__/index.test.tsx

@@ -48,7 +48,6 @@ describe('<Navigation />', () => {
     renderComponent(
       configureAppStore({
         wallet: {
-          isOpen: true,
           selectedWallet: 'dummy',
           wallets: {
             dummy: {

src/app/components/Sidebar/index.tsx

@@ -1,4 +1,4 @@
-import { selectAddress, selectIsOpen } from 'app/state/wallet/selectors'
+import { selectAddress, selectHasAccounts } from 'app/state/wallet/selectors'
 import { Avatar } from 'grommet/es6/components/Avatar'
 import { Box } from 'grommet/es6/components/Box'
 import { Button } from 'grommet/es6/components/Button'
@@ -83,13 +83,13 @@ export const SidebarButton = ({
   onClick,
   ...rest
 }: SidebarButtonProps) => {
-  const walletIsOpen = useSelector(selectIsOpen)
+  const walletHasAccounts = useSelector(selectHasAccounts)
   const size = useContext(ResponsiveContext)
   const location = useLocation()
   const isActive = route ? route === location.pathname : false
   const isMediumSize = size === 'medium'
 
-  if (!walletIsOpen && needsWalletOpen) {
+  if (!walletHasAccounts && needsWalletOpen) {
     return null
   }
 

src/app/components/Toolbar/Features/AccountSelector/__tests__/index.test.tsx

@@ -22,7 +22,6 @@ describe('<AccountSelector  />', () => {
   beforeEach(() => {
     store = configureAppStore({
       wallet: {
-        isOpen: true,
         wallets: {
           oasis1qq3xrq0urs8qcffhvmhfhz4p0mu7ewc8rscnlwxe: {
             address: 'oasis1qq3xrq0urs8qcffhvmhfhz4p0mu7ewc8rscnlwxe',

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

@@ -7,29 +7,35 @@ import { Button } from 'grommet/es6/components/Button'
 import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
 import React, { memo, useState } from 'react'
 import { useSelector } from 'react-redux'
-import { selectAddress } from 'app/state/wallet/selectors'
+import { selectAddress, selectHasAccounts } from 'app/state/wallet/selectors'
 
 import { AccountSelector } from '../AccountSelector'
 import { JazzIcon } from '../../../JazzIcon'
 import { sidebarSmallSizeLogo, sidebarMediumSizeLogo } from '../../../../../styles/theme/elementSizes'
 import { addressToJazzIconSeed } from './addressToJazzIconSeed'
+import { UserSettings } from 'grommet-icons/es6/icons/UserSettings'
 
 export const AccountSelectorButton = memo(() => {
+  const walletHasAccounts = useSelector(selectHasAccounts)
   const address = useSelector(selectAddress)
   const [layerVisibility, setLayerVisibility] = useState(false)
   const isMobile = React.useContext(ResponsiveContext) === 'small'
 
-  if (!address) {
+  if (!walletHasAccounts) {
     return null
   }
 
   return (
     <>
       <Button onClick={() => setLayerVisibility(true)} data-testid="account-selector">
-        <JazzIcon
-          diameter={isMobile ? sidebarSmallSizeLogo : sidebarMediumSizeLogo}
-          seed={addressToJazzIconSeed(address)}
-        />
+        {address ? (
+          <JazzIcon
+            diameter={isMobile ? sidebarSmallSizeLogo : sidebarMediumSizeLogo}
+            seed={addressToJazzIconSeed(address)}
+          />
+        ) : (
+          <UserSettings />
+        )}
       </Button>
       {layerVisibility && <AccountSelector closeHandler={() => setLayerVisibility(false)} />}
     </>

src/app/components/Toolbar/index.tsx

@@ -3,7 +3,7 @@
  * Toolbar
  *
  */
-import { selectIsOpen } from 'app/state/wallet/selectors'
+import { selectHasAccounts } from 'app/state/wallet/selectors'
 import { Box } from 'grommet/es6/components/Box'
 import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
 import styled from 'styled-components'
@@ -29,7 +29,7 @@ const StyledToolbar = styled(Box)`
 `
 
 export function Toolbar() {
-  const isOpen = useSelector(selectIsOpen)
+  const hasAccounts = useSelector(selectHasAccounts)
   const isMobile = React.useContext(ResponsiveContext) === 'small'
 
   return (
@@ -43,7 +43,7 @@ export function Toolbar() {
         <NetworkSelector />
       </Box>
 
-      {isOpen && (
+      {hasAccounts && (
         <Box justify="center">
           <AccountSelectorButton />
         </Box>

src/app/pages/AccountPage/Features/AccountSummary/index.tsx

@@ -87,11 +87,11 @@ const StyledDescriptionList = styled.dl`
 export interface AccountSummaryProps {
   address: string
   balance: BalanceDetails
-  walletIsOpen?: boolean
+  walletHasAccounts?: boolean
   walletAddress?: string
 }
 
-export function AccountSummary({ address, balance, walletAddress, walletIsOpen }: AccountSummaryProps) {
+export function AccountSummary({ address, balance, walletAddress, walletHasAccounts }: AccountSummaryProps) {
   const { t } = useTranslation()
   const { dark } = React.useContext<any>(ThemeContext)
   const isMobile = React.useContext(ResponsiveContext) === 'small'
@@ -100,15 +100,15 @@ export function AccountSummary({ address, balance, walletAddress, walletIsOpen }
   return (
     <>
       <Box margin={{ bottom: 'small' }}>
-        {walletIsOpen && walletAddress === address && (
+        {walletHasAccounts && walletAddress === address && (
           <AlertBox status="ok-weak">{t('account.summary.yourAccount', 'This is your account.')}</AlertBox>
         )}
-        {walletIsOpen && walletAddress !== address && (
+        {walletHasAccounts && walletAddress !== address && (
           <AlertBox status="warning">
             {t('account.summary.notYourAccount', 'This is not your account.')}
           </AlertBox>
         )}
-        {!walletIsOpen && (
+        {!walletHasAccounts && (
           <AlertBox status="warning">
             <Trans
               i18nKey="account.summary.noWalletIsOpen"

src/app/pages/AccountPage/__tests__/index.test.tsx

@@ -59,7 +59,6 @@ describe('<AccountPage  />', () => {
         debondingDelegations: [],
       },
       wallet: {
-        isOpen: true,
         selectedWallet: 'oasis1qz0k5q8vjqvu4s4nwxyj406ylnflkc4vrcjghuwk',
         wallets: {
           oasis1qz0k5q8vjqvu4s4nwxyj406ylnflkc4vrcjghuwk: {

src/app/pages/AccountPage/index.tsx

@@ -29,7 +29,7 @@ import { selectAccount } from 'app/state/account/selectors'
 import { BalanceDetails } from 'app/state/account/types'
 import {
   selectAddress,
-  selectIsOpen,
+  selectHasAccounts,
   selectWallets,
   selectWalletsAddresses,
 } from 'app/state/wallet/selectors'
@@ -80,7 +80,7 @@ export function AccountPage(props: AccountPageProps) {
   const account = useSelector(selectAccount)
   const stake = useSelector(selectStaking)
 
-  const walletIsOpen = useSelector(selectIsOpen)
+  const walletHasAccounts = useSelector(selectHasAccounts)
   const walletAddress = useSelector(selectAddress)
   const selectedNetwork = useSelector(selectSelectedNetwork)
   const { active } = useSelector(selectTransaction)
@@ -151,7 +151,7 @@ export function AccountPage(props: AccountPageProps) {
             address={address}
             balance={balance}
             walletAddress={walletAddress}
-            walletIsOpen={walletIsOpen}
+            walletHasAccounts={walletHasAccounts}
           />
           <Nav
             background="background-front"

src/app/state/selectIsAddressInWallet.ts

@@ -1,8 +1,8 @@
 import { createSelector } from '@reduxjs/toolkit'
 import { selectAccountAddress } from 'app/state/account/selectors'
-import { selectAddress, selectIsOpen } from 'app/state/wallet/selectors'
+import { selectAddress, selectHasAccounts } from 'app/state/wallet/selectors'
 
 export const selectIsAddressInWallet = createSelector(
-  [selectIsOpen, selectAddress, selectAccountAddress],
-  (walletIsOpen, walletAddress, address) => walletIsOpen && walletAddress === address,
+  [selectHasAccounts, selectAddress, selectAccountAddress],
+  (hasAccounts, walletAddress, address) => hasAccounts && walletAddress === address,
 )

src/app/state/selectUnlockedStatus.ts

@@ -1,17 +1,20 @@
 import { createSelector } from '@reduxjs/toolkit'
 import { selectSlice as selectPersistSlice } from 'app/state/persist/selectors'
-import { selectIsOpen } from 'app/state/wallet/selectors'
+import { selectHasAccounts } from 'app/state/wallet/selectors'
 
-export const selectUnlockedStatus = createSelector([selectPersistSlice, selectIsOpen], (state, isOpen) => {
-  if (state.hasPersistedProfiles) {
-    if (state.stringifiedEncryptionKey === 'skipped') {
-      if (isOpen) return 'openSkippedUnlockingProfile'
-      return 'emptySkippedUnlockingProfile'
+export const selectUnlockedStatus = createSelector(
+  [selectPersistSlice, selectHasAccounts],
+  (state, hasAccounts) => {
+    if (state.hasPersistedProfiles) {
+      if (state.stringifiedEncryptionKey === 'skipped') {
+        if (hasAccounts) return 'openSkippedUnlockingProfile'
+        return 'emptySkippedUnlockingProfile'
+      }
+      if (state.stringifiedEncryptionKey) return 'unlockedProfile'
+      return 'lockedProfile'
+    } else {
+      if (hasAccounts) return 'openUnpersisted'
+      return 'emptyUnpersisted'
     }
-    if (state.stringifiedEncryptionKey) return 'unlockedProfile'
-    return 'lockedProfile'
-  } else {
-    if (isOpen) return 'openUnpersisted'
-    return 'emptyUnpersisted'
-  }
-})
+  },
+)

src/app/state/transaction/saga.test.ts

@@ -16,7 +16,6 @@ const makeState = (wallet: Partial<Wallet>): DeepPartialRootState => {
     wallet: {
       wallets: { [wallet.address!]: wallet },
       selectedWallet: wallet.address,
-      isOpen: true,
     },
   }
 }

src/app/state/wallet/index.ts

@@ -11,7 +11,6 @@ import {
 
 export const initialState: WalletState = {
   wallets: {},
-  isOpen: false,
   selectedWallet: undefined,
 }
 
@@ -50,7 +49,6 @@ const slice = createSlice({
       const newWallet = action.payload
       state.wallets[newWallet.address] = newWallet
       state.selectedWallet ??= newWallet.address
-      state.isOpen = true
     },
   },
 })

src/app/state/wallet/saga.test.ts

@@ -134,7 +134,6 @@ describe('Wallet Sagas', () => {
         .withState<DeepPartialRootState>({
           ...state,
           wallet: {
-            isOpen: true,
             selectedWallet: 'oasis1qz0k5q8vjqvu4s4nwxyj406ylnflkc4vrcjghuwk',
             wallets: {
               oasis1qz0k5q8vjqvu4s4nwxyj406ylnflkc4vrcjghuwk: {

src/app/state/wallet/selectors.ts

@@ -20,4 +20,4 @@ export const selectWalletsAddresses = createSelector([selectWallets], wallets =>
 export const selectPublicKey = createSelector([selectActiveWallet], wallet => wallet?.publicKey ?? '')
 export const selectBalance = createSelector([selectActiveWallet], wallet => wallet?.balance)
 export const selectType = createSelector([selectActiveWallet], wallet => wallet?.type)
-export const selectIsOpen = createSelector([selectSlice], wallet => wallet.isOpen)
+export const selectHasAccounts = createSelector([selectWallets], wallets => Object.keys(wallets).length > 0)

src/app/state/wallet/types.ts

@@ -36,7 +36,6 @@ export interface OpenSelectedAccountsPayload {
 
 /* --- STATE --- */
 export interface WalletState {
-  isOpen: boolean
   selectedWallet?: string
   wallets: { [address: string]: Wallet }
 }