Merge pull request #1961 from oasisprotocol/mz/footer

Move mobile footer to profile dropdown

.changelog/1961.trivial.md

@@ -0,0 +1 @@
+Move mobile footer to profile dropdown

src/app/__tests__/__snapshots__/index.test.tsx.snap

@@ -46,7 +46,7 @@ exports[`<App /> should render and match the snapshot 1`] = `
               <Main>
                 <Toolbar />
                 <Outlet />
-                <Memo />
+                <PageFooter />
               </Main>
             </Box>
           </UnlockGate>

src/app/components/Footer/PageFooter.tsx

@@ -0,0 +1,25 @@
+import { useContext } from 'react'
+import { useSelector } from 'react-redux'
+import { Box } from 'grommet/es6/components/Box'
+import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
+import { selectHasAccounts } from 'app/state/wallet/selectors'
+import { MobileFooterNavigation } from '../MobileFooterNavigation'
+import { Footer } from '.'
+
+export const PageFooter = () => {
+  const isMobile = useContext(ResponsiveContext) === 'small'
+  const isDesktop = useContext(ResponsiveContext) === 'large'
+  const walletHasAccounts = useSelector(selectHasAccounts)
+
+  return (
+    <>
+      {walletHasAccounts && isMobile && (
+        <Box pad="xlarge">
+          <MobileFooterNavigation />
+        </Box>
+      )}
+      {/* Footer for opened wallet is rendered in Settings tab in Profile dropdown */}
+      {((walletHasAccounts && isDesktop) || !walletHasAccounts) && <Footer />}
+    </>
+  )
+}

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

@@ -0,0 +1,70 @@
+import { render, screen } from '@testing-library/react'
+import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
+import { MemoryRouter } from 'react-router-dom'
+import { Provider } from 'react-redux'
+import { ThemeProvider } from 'styles/theme/ThemeProvider'
+import { configureAppStore } from 'store/configureStore'
+import { Wallet } from 'app/state/wallet/types'
+import { PageFooter } from '../PageFooter'
+
+const renderComponent = (store: any, responsiveContext: string) =>
+  render(
+    <Provider store={store}>
+      <MemoryRouter>
+        <ThemeProvider>
+          <ResponsiveContext.Provider value={responsiveContext}>
+            <PageFooter />
+          </ResponsiveContext.Provider>
+        </ThemeProvider>
+      </MemoryRouter>
+    </Provider>,
+  )
+
+describe('<PageFooter />', () => {
+  let store: ReturnType<typeof configureAppStore>
+
+  beforeEach(() => {
+    jest.resetModules()
+
+    store = configureAppStore({
+      wallet: {
+        selectedWallet: 'dummy',
+        wallets: {
+          dummy: {
+            address: 'dummy',
+          } as Wallet,
+        },
+      },
+    })
+  })
+
+  it('should render mobile navigation without footer on mobile when account is open', () => {
+    renderComponent(store, 'small')
+
+    expect(screen.queryByTestId('footer')).not.toBeInTheDocument()
+    expect(screen.getByTestId('mobile-footer-navigation')).toBeInTheDocument()
+  })
+
+  it('should render footer without mobile navigation on desktop when account is open', () => {
+    renderComponent(store, 'large')
+
+    expect(screen.getByTestId('footer')).toBeInTheDocument()
+    expect(screen.queryByTestId('mobile-footer-navigation')).not.toBeInTheDocument()
+  })
+
+  it('should render footer without mobile navigation on mobile when account is not open', () => {
+    const storeWithoutAccount = configureAppStore({})
+    renderComponent(storeWithoutAccount, 'small')
+
+    expect(screen.getByTestId('footer')).toBeInTheDocument()
+    expect(screen.queryByTestId('mobile-footer-navigation')).not.toBeInTheDocument()
+  })
+
+  it('should render footer without mobile navigation on desktop when account is not open', () => {
+    const storeWithoutAccount = configureAppStore({})
+    renderComponent(storeWithoutAccount, 'large')
+
+    expect(screen.getByTestId('footer')).toBeInTheDocument()
+    expect(screen.queryByTestId('mobile-footer-navigation')).not.toBeInTheDocument()
+  })
+})