From 3a68509b53fa64ae5dacb8bcc9cad6ea9626eeae Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Thu, 30 May 2024 12:58:25 +0200
Subject: [PATCH 1/9] Move mobile footer to profile dropdown

---
 .changelog/1961.trivial.md                    |  1 +
 src/app/components/Footer/index.tsx           | 21 +++++++++++++++++--
 .../MobileFooterNavigation/index.tsx          | 11 +---------
 .../Toolbar/Features/Settings/index.tsx       | 14 ++++++++++---
 src/app/index.tsx                             |  4 ++--
 5 files changed, 34 insertions(+), 17 deletions(-)
 create mode 100644 .changelog/1961.trivial.md

diff --git a/.changelog/1961.trivial.md b/.changelog/1961.trivial.md
new file mode 100644
index 0000000000..0e37229a6e
--- /dev/null
+++ b/.changelog/1961.trivial.md
@@ -0,0 +1 @@
+Move mobile footer to profile dropdown
diff --git a/src/app/components/Footer/index.tsx b/src/app/components/Footer/index.tsx
index ece2f11bde..4bed59b4e4 100644
--- a/src/app/components/Footer/index.tsx
+++ b/src/app/components/Footer/index.tsx
@@ -2,7 +2,7 @@ import { Anchor } from 'grommet/es6/components/Anchor'
 import { Box } from 'grommet/es6/components/Box'
 import { Text } from 'grommet/es6/components/Text'
 import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
-import React, { memo, useState } from 'react'
+import React, { memo, useContext, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { Trans, useTranslation } from 'react-i18next'
 import { selectHasAccounts } from 'app/state/wallet/selectors'
@@ -147,7 +147,24 @@ export const Footer = memo(() => {
           defaults="We’d love your feedback at <EmailLink>wallet@oasisprotocol.org</EmailLink>"
         />
       </Text>
-      <MobileFooterNavigation walletHasAccounts={walletHasAccounts} isMobile={isMobile} />
     </Box>
   )
 })
+
+export const PageFooter = () => {
+  const isMobile = useContext(ResponsiveContext) === 'small'
+  const walletHasAccounts = useSelector(selectHasAccounts)
+
+  return (
+    <>
+      {walletHasAccounts && isMobile ? (
+        // Footer for opened wallet is rendered in Settings tab in Profile dropdown
+        <Box pad="xlarge">
+          <MobileFooterNavigation />
+        </Box>
+      ) : (
+        <Footer />
+      )}
+    </>
+  )
+}
diff --git a/src/app/components/MobileFooterNavigation/index.tsx b/src/app/components/MobileFooterNavigation/index.tsx
index 3888044e82..519442e51e 100644
--- a/src/app/components/MobileFooterNavigation/index.tsx
+++ b/src/app/components/MobileFooterNavigation/index.tsx
@@ -43,12 +43,7 @@ const StyledNavLink = styled(NavLink)`
   }
 `
 
-export interface MobileFooterNavigationProps {
-  walletHasAccounts: boolean
-  isMobile: boolean
-}
-
-export const MobileFooterNavigation = ({ walletHasAccounts, isMobile }: MobileFooterNavigationProps) => {
+export const MobileFooterNavigation = () => {
   const { t } = useTranslation()
   const address = useSelector(selectAddress)
   const { getParaTimesRoutePath, paraTimesRouteLabel } = useParaTimesNavigation()
@@ -83,10 +78,6 @@ export const MobileFooterNavigation = ({ walletHasAccounts, isMobile }: MobileFo
     return menuItems
   }, [address, getParaTimesRoutePath, paraTimesRouteLabel, t])
 
-  if (!isMobile || !walletHasAccounts) {
-    return null
-  }
-
   return (
     <StyledMobileFooterNavigation data-testid="mobile-footer-navigation">
       {getMenuItems.map(params => (
diff --git a/src/app/components/Toolbar/Features/Settings/index.tsx b/src/app/components/Toolbar/Features/Settings/index.tsx
index 2d7e3ca6d6..b434482aee 100644
--- a/src/app/components/Toolbar/Features/Settings/index.tsx
+++ b/src/app/components/Toolbar/Features/Settings/index.tsx
@@ -1,12 +1,20 @@
+import { useContext } from 'react'
+import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
 import { Box } from 'grommet/es6/components/Box'
 import { ThemeSelect } from 'app/components/ThemeSwitcher'
 import { LanguageSelect } from 'app/components/LanguageSelect'
+import { Footer } from 'app/components/Footer'
 
 export const Settings = () => {
+  const isMobile = useContext(ResponsiveContext) === 'small'
+
   return (
-    <Box gap="small">
-      <LanguageSelect />
-      <ThemeSelect />
+    <Box gap="small" style={{ flex: 1, justifyContent: 'space-between' }}>
+      <Box>
+        <LanguageSelect />
+        <ThemeSelect />
+      </Box>
+      {isMobile && <Footer />}
     </Box>
   )
 }
diff --git a/src/app/index.tsx b/src/app/index.tsx
index fa11b9b488..9b545bfbc3 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -14,7 +14,7 @@ import { Helmet } from 'react-helmet-async'
 import { useTranslation } from 'react-i18next'
 import { Outlet } from 'react-router-dom'
 import { FatalErrorHandler } from './components/FatalErrorHandler'
-import { Footer } from './components/Footer'
+import { PageFooter } from './components/Footer'
 import { Navigation } from './components/Sidebar'
 import { Toolbar } from './components/Toolbar'
 import { ModalProvider } from './components/Modal'
@@ -50,7 +50,7 @@ export function App() {
                     {isMobile && <BuildBanner />}
                     <Toolbar />
                     <Outlet />
-                    <Footer />
+                    <PageFooter />
                   </Main>
                 </Box>
               </UnlockGate>

From 7c8228ea2b7f904c8eee3d5b45aa928d3b1f3ec1 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Thu, 30 May 2024 12:09:50 +0200
Subject: [PATCH 2/9] Move PageFooter to separate file

---
 src/app/components/Footer/PageFooter.tsx | 25 ++++++++++++++++++++++++
 src/app/components/Footer/index.tsx      | 21 +-------------------
 src/app/index.tsx                        |  2 +-
 3 files changed, 27 insertions(+), 21 deletions(-)
 create mode 100644 src/app/components/Footer/PageFooter.tsx

diff --git a/src/app/components/Footer/PageFooter.tsx b/src/app/components/Footer/PageFooter.tsx
new file mode 100644
index 0000000000..254e2ea95a
--- /dev/null
+++ b/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 walletHasAccounts = useSelector(selectHasAccounts)
+
+  return (
+    <>
+      {walletHasAccounts && isMobile ? (
+        // Footer for opened wallet is rendered in Settings tab in Profile dropdown
+        <Box pad="xlarge">
+          <MobileFooterNavigation />
+        </Box>
+      ) : (
+        <Footer />
+      )}
+    </>
+  )
+}
diff --git a/src/app/components/Footer/index.tsx b/src/app/components/Footer/index.tsx
index 4bed59b4e4..c0d929b124 100644
--- a/src/app/components/Footer/index.tsx
+++ b/src/app/components/Footer/index.tsx
@@ -2,14 +2,13 @@ import { Anchor } from 'grommet/es6/components/Anchor'
 import { Box } from 'grommet/es6/components/Box'
 import { Text } from 'grommet/es6/components/Text'
 import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
-import React, { memo, useContext, useState } from 'react'
+import React, { memo, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { Trans, useTranslation } from 'react-i18next'
 import { selectHasAccounts } from 'app/state/wallet/selectors'
 import { intlDateTimeFormat } from '../DateFormatter/intlDateTimeFormat'
 import { backend } from 'vendors/backend'
 import { BackendAPIs } from 'config'
-import { MobileFooterNavigation } from '../MobileFooterNavigation'
 import { mobileFooterNavigationHeight } from '../../../styles/theme/elementSizes'
 import { Button } from 'grommet/es6/components/Button'
 
@@ -150,21 +149,3 @@ export const Footer = memo(() => {
     </Box>
   )
 })
-
-export const PageFooter = () => {
-  const isMobile = useContext(ResponsiveContext) === 'small'
-  const walletHasAccounts = useSelector(selectHasAccounts)
-
-  return (
-    <>
-      {walletHasAccounts && isMobile ? (
-        // Footer for opened wallet is rendered in Settings tab in Profile dropdown
-        <Box pad="xlarge">
-          <MobileFooterNavigation />
-        </Box>
-      ) : (
-        <Footer />
-      )}
-    </>
-  )
-}
diff --git a/src/app/index.tsx b/src/app/index.tsx
index 9b545bfbc3..2af1e7026c 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -14,7 +14,7 @@ import { Helmet } from 'react-helmet-async'
 import { useTranslation } from 'react-i18next'
 import { Outlet } from 'react-router-dom'
 import { FatalErrorHandler } from './components/FatalErrorHandler'
-import { PageFooter } from './components/Footer'
+import { PageFooter } from './components/Footer/PageFooter'
 import { Navigation } from './components/Sidebar'
 import { Toolbar } from './components/Toolbar'
 import { ModalProvider } from './components/Modal'

From d2ff3c62a8f3c8919b55c5989fddf8c4dc67b005 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Thu, 30 May 2024 12:28:14 +0200
Subject: [PATCH 3/9] Update footer tests

---
 .../__snapshots__/index.test.tsx.snap         |   2 +-
 .../Footer/__tests__/PageFooter.test.tsx      |  70 +++++
 .../__snapshots__/index.test.tsx.snap         | 245 +-----------------
 src/app/components/Footer/index.tsx           |   1 +
 .../__tests__/index.test.tsx                  |  41 +--
 .../Settings/__tests__/index.test.tsx         |  44 ++++
 6 files changed, 130 insertions(+), 273 deletions(-)
 create mode 100644 src/app/components/Footer/__tests__/PageFooter.test.tsx
 create mode 100644 src/app/components/Toolbar/Features/Settings/__tests__/index.test.tsx

diff --git a/src/app/__tests__/__snapshots__/index.test.tsx.snap b/src/app/__tests__/__snapshots__/index.test.tsx.snap
index 58d0c26986..bbca81b5aa 100644
--- a/src/app/__tests__/__snapshots__/index.test.tsx.snap
+++ b/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>
diff --git a/src/app/components/Footer/__tests__/PageFooter.test.tsx b/src/app/components/Footer/__tests__/PageFooter.test.tsx
new file mode 100644
index 0000000000..a014652dc0
--- /dev/null
+++ b/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()
+  })
+})
diff --git a/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap
index a284c1abd0..8e5b9abee4 100644
--- a/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,40 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Footer /> should render mobile version of footer 1`] = `
-.c9 {
-  display: inline-block;
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  width: 24px;
-  height: 24px;
-  fill: currentColor;
-  stroke: currentColor;
-}
-
-.c9 g {
-  fill: inherit;
-  stroke: inherit;
-}
-
-.c9 *:not([stroke])[fill='none'] {
-  stroke-width: 0;
-}
-
-.c9 *[stroke*='#'],
-.c9 *[STROKE*='#'] {
-  stroke: inherit;
-  fill: none;
-}
-
-.c9 *[fill-rule],
-.c9 *[FILL-RULE],
-.c9 *[fill*='#'],
-.c9 *[FILL*='#'] {
-  fill: inherit;
-  stroke: none;
-}
-
 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -79,39 +45,6 @@ exports[`<Footer /> should render mobile version of footer 1`] = `
   flex-direction: column;
 }
 
-.c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  box-sizing: border-box;
-  max-width: 100%;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-width: 0;
-  min-height: 0;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 100%;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c10 {
-  -webkit-flex: 0 0 auto;
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-  height: 12px;
-}
-
 .c2 {
   box-sizing: border-box;
   display: -webkit-inline-box;
@@ -146,52 +79,6 @@ exports[`<Footer /> should render mobile version of footer 1`] = `
   text-align: center;
 }
 
-.c11 {
-  font-size: 14px;
-  line-height: 20px;
-  text-align: center;
-}
-
-.c6 {
-  background-color: #FFFFFF;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 4rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  box-shadow: 0px 0px 1px #EDEDED;
-  border-top: solid 1px #11111108;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c7 {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  -webkit-flex-basis: 0;
-  -ms-flex-preferred-size: 0;
-  flex-basis: 0;
-}
-
-.c7:hover {
-  background-color: #11111108;
-}
-
 .c5 {
   display: inline-block;
   box-sizing: border-box;
@@ -287,14 +174,9 @@ exports[`<Footer /> should render mobile version of footer 1`] = `
   }
 }
 
-@media only screen and (max-width:768px) {
-  .c10 {
-    height: 6px;
-  }
-}
-
 <footer
   class="c0"
+  data-testid="footer"
 >
   <span
     class="c1"
@@ -379,130 +261,5 @@ exports[`<Footer /> should render mobile version of footer 1`] = `
       </span>
     </a>
   </span>
-  <nav
-    class="c6"
-    data-testid="mobile-footer-navigation"
-  >
-    <a
-      class="c7"
-      href="/account/dummy"
-    >
-      <span
-        class="c8"
-      >
-        <svg
-          aria-label="Money"
-          class="c9"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M16 16c0-1.105-3.134-2-7-2s-7 .895-7 2 3.134 2 7 2 7-.895 7-2zM2 16v4.937C2 22.077 5.134 23 9 23s7-.924 7-2.063V16M9 5c-4.418 0-8 .895-8 2s3.582 2 8 2M1 7v5c0 1.013 3.582 2 8 2M23 4c0-1.105-3.1-2-6.923-2-3.824 0-6.923.895-6.923 2s3.1 2 6.923 2S23 5.105 23 4zm-7 12c3.824 0 7-.987 7-2V4M9.154 4v10.166M9 9c0 1.013 3.253 2 7.077 2C19.9 11 23 10.013 23 9"
-            fill="none"
-            stroke="#000"
-            stroke-width="2"
-          />
-        </svg>
-        <span
-          class="c10"
-        />
-        <span
-          class="c11"
-          style="line-height: 1;"
-        >
-          Account
-        </span>
-      </span>
-    </a>
-    <a
-      class="c7"
-      href="/account/dummy/stake"
-    >
-      <span
-        class="c8"
-      >
-        <svg
-          aria-label="LineChart"
-          class="c9"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="m1 16 7-7 5 5L23 4M0 22h23.999M16 4h7v7"
-            fill="none"
-            stroke="#000"
-            stroke-width="2"
-          />
-        </svg>
-        <span
-          class="c10"
-        />
-        <span
-          class="c11"
-          style="line-height: 1;"
-        >
-          Stake
-        </span>
-      </span>
-    </a>
-    <a
-      class="c7"
-      href="/account/dummy/paratimes"
-    >
-      <span
-        class="c8"
-      >
-        <svg
-          aria-label="Inherit"
-          class="c9"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="m17 18-5-3 5 3zM7 18l5-3v-4m5 9a3 3 0 1 0 6 0 3 3 0 0 0-6 0zM4 17a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM17 6a5 5 0 1 1-10.001-.001A5 5 0 0 1 17 6z"
-            fill="none"
-            stroke="#231F20"
-            stroke-width="2"
-          />
-        </svg>
-        <span
-          class="c10"
-        />
-        <span
-          class="c11"
-          style="line-height: 1;"
-        >
-          ParaTimes
-        </span>
-      </span>
-    </a>
-    <a
-      class="c7"
-      href="/account/dummy/fiat"
-    >
-      <span
-        class="c8"
-      >
-        <svg
-          aria-label="CreditCard"
-          class="c9"
-          viewBox="0 0 24 24"
-        >
-          <path
-            d="M1 5c0-.552.44-1 1.002-1h19.996A1 1 0 0 1 23 5v14c0 .552-.44 1-1.002 1H2.002A1 1 0 0 1 1 19V5zm0 3h22v2H1V8zm4 7h2v.5H5V15zm5 0h6v.5h-6V15z"
-            fill="none"
-            stroke="#000"
-            stroke-width="2"
-          />
-        </svg>
-        <span
-          class="c10"
-        />
-        <span
-          class="c11"
-          style="line-height: 1;"
-        >
-          Buy
-        </span>
-      </span>
-    </a>
-  </nav>
 </footer>
 `;
diff --git a/src/app/components/Footer/index.tsx b/src/app/components/Footer/index.tsx
index c0d929b124..d3086046e4 100644
--- a/src/app/components/Footer/index.tsx
+++ b/src/app/components/Footer/index.tsx
@@ -55,6 +55,7 @@ export const Footer = memo(() => {
         bottom: isMobile && walletHasAccounts ? mobileFooterNavigationHeight : 'none',
       }}
       margin={{ bottom: 'large' }}
+      data-testid="footer"
     >
       <Text size={responsiveSize} textAlign="center" margin={{ bottom: isMobile ? 'small' : 'none' }}>
         <Trans
diff --git a/src/app/components/MobileFooterNavigation/__tests__/index.test.tsx b/src/app/components/MobileFooterNavigation/__tests__/index.test.tsx
index 8fcea0ad33..77ff62d79e 100644
--- a/src/app/components/MobileFooterNavigation/__tests__/index.test.tsx
+++ b/src/app/components/MobileFooterNavigation/__tests__/index.test.tsx
@@ -1,35 +1,23 @@
-import * as React from 'react'
 import { render, screen } from '@testing-library/react'
 import { MemoryRouter } from 'react-router-dom'
 import { Provider } from 'react-redux'
 import { configureAppStore } from 'store/configureStore'
 import { Wallet } from 'app/state/wallet/types'
-import {
-  useParaTimesNavigation,
-  ParaTimesNavigationHook,
-} from '../../../pages/ParaTimesPage/useParaTimesNavigation'
-import { MobileFooterNavigation, MobileFooterNavigationProps } from '..'
+import { MobileFooterNavigation } from '..'
 
-jest.mock('../../../pages/ParaTimesPage/useParaTimesNavigation')
-
-const renderComponent = (store: any, { walletHasAccounts, isMobile }: MobileFooterNavigationProps) =>
+const renderComponent = (store: any) =>
   render(
     <Provider store={store}>
       <MemoryRouter>
-        <MobileFooterNavigation walletHasAccounts={walletHasAccounts} isMobile={isMobile} />
+        <MobileFooterNavigation />
       </MemoryRouter>
     </Provider>,
   )
 
 describe('<MobileFooterNavigation />', () => {
   let store: ReturnType<typeof configureAppStore>
-  const mockUseParaTimesNavigationResult = {
-    getParaTimesRoutePath: (address: string) => address,
-    paraTimesRouteLabel: 'MockParaTimesLabel',
-  } as ParaTimesNavigationHook
 
   beforeEach(() => {
-    jest.mocked(useParaTimesNavigation).mockReturnValue(mockUseParaTimesNavigationResult)
     store = configureAppStore({
       wallet: {
         selectedWallet: 'dummy',
@@ -42,22 +30,19 @@ describe('<MobileFooterNavigation />', () => {
     })
   })
 
-  it('should render component for mobile and when account is open', () => {
-    renderComponent(store, { walletHasAccounts: true, isMobile: true })
-
-    expect(screen.getByTestId('mobile-footer-navigation')).toBeInTheDocument()
-    expect(screen.queryByText('MockParaTimesLabel')).toBeInTheDocument()
-  })
+  it('should render mobile navigation', () => {
+    renderComponent(store)
 
-  it('should not render component for non mobile', () => {
-    renderComponent(store, { walletHasAccounts: true, isMobile: false })
+    const walletLink = screen.getByRole('link', { name: /menu.wallet/ })
+    expect(walletLink).toHaveAttribute('href', '/account/dummy')
 
-    expect(screen.queryByTestId('mobile-footer-navigation')).not.toBeInTheDocument()
-  })
+    const stakeLink = screen.getByRole('link', { name: /menu.stake/ })
+    expect(stakeLink).toHaveAttribute('href', '/account/dummy/stake')
 
-  it('should not render component when account is not open', () => {
-    renderComponent(store, { walletHasAccounts: false, isMobile: true })
+    const paraTimesLink = screen.getByRole('link', { name: /menu.paraTimes/ })
+    expect(paraTimesLink).toHaveAttribute('href', '/account/dummy/paratimes')
 
-    expect(screen.queryByTestId('mobile-footer-navigation')).not.toBeInTheDocument()
+    const buyLink = screen.getByRole('link', { name: /menu.fiatOnramp-mobile/ })
+    expect(buyLink).toHaveAttribute('href', '/account/dummy/fiat')
   })
 })
diff --git a/src/app/components/Toolbar/Features/Settings/__tests__/index.test.tsx b/src/app/components/Toolbar/Features/Settings/__tests__/index.test.tsx
new file mode 100644
index 0000000000..c2116f28f2
--- /dev/null
+++ b/src/app/components/Toolbar/Features/Settings/__tests__/index.test.tsx
@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react'
+import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
+import { Provider } from 'react-redux'
+import { ThemeProvider } from 'styles/theme/ThemeProvider'
+import { configureAppStore } from 'store/configureStore'
+import { Settings } from '..'
+
+const renderComponent = (store: any, responsiveContext: string) =>
+  render(
+    <Provider store={store}>
+      <ThemeProvider>
+        <ResponsiveContext.Provider value={responsiveContext}>
+          <Settings />
+        </ResponsiveContext.Provider>
+      </ThemeProvider>
+    </Provider>,
+  )
+
+describe('<Settings />', () => {
+  let store: ReturnType<typeof configureAppStore>
+
+  beforeEach(() => {
+    jest.resetModules()
+
+    store = configureAppStore({
+      theme: {
+        selected: 'system',
+      },
+    })
+  })
+
+  it('should not render footer on desktop', () => {
+    renderComponent(store, 'large')
+
+    expect(screen.queryByTestId('footer')).not.toBeInTheDocument()
+  })
+
+  it('should render footer on mobile', () => {
+    renderComponent(store, 'small')
+
+    expect(screen.getByTestId('footer')).toBeInTheDocument()
+    expect(screen.queryByTestId('mobile-footer-navigation')).not.toBeInTheDocument()
+  })
+})

From 5f6e21c09c58eb7caa057228c14c3c2f711145e6 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Fri, 28 Jun 2024 18:08:56 +0200
Subject: [PATCH 4/9] Remove show/hide button from footer

---
 .../__snapshots__/index.test.tsx.snap         | 83 ++++---------------
 .../Footer/__tests__/index.test.tsx           |  4 -
 src/app/components/Footer/index.tsx           | 71 ++++++----------
 src/locales/en/translation.json               |  7 +-
 4 files changed, 43 insertions(+), 122 deletions(-)

diff --git a/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap
index 8e5b9abee4..7add79b2b7 100644
--- a/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap
@@ -79,64 +79,6 @@ exports[`<Footer /> should render mobile version of footer 1`] = `
   text-align: center;
 }
 
-.c5 {
-  display: inline-block;
-  box-sizing: border-box;
-  cursor: pointer;
-  font: inherit;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  margin: 0;
-  background: transparent;
-  overflow: visible;
-  text-transform: none;
-  color: #0500e2;
-  outline: none;
-  border: none;
-  padding: 0;
-  text-align: inherit;
-}
-
-.c5:focus {
-  outline: none;
-  box-shadow: 0 0 2px 2px #00A9FF;
-}
-
-.c5:focus > circle,
-.c5:focus > ellipse,
-.c5:focus > line,
-.c5:focus > path,
-.c5:focus > polygon,
-.c5:focus > polyline,
-.c5:focus > rect {
-  outline: none;
-  box-shadow: 0 0 2px 2px #00A9FF;
-}
-
-.c5:focus::-moz-focus-inner {
-  border: 0;
-}
-
-.c5:focus:not(:focus-visible) {
-  outline: none;
-  box-shadow: none;
-}
-
-.c5:focus:not(:focus-visible) > circle,
-.c5:focus:not(:focus-visible) > ellipse,
-.c5:focus:not(:focus-visible) > line,
-.c5:focus:not(:focus-visible) > path,
-.c5:focus:not(:focus-visible) > polygon,
-.c5:focus:not(:focus-visible) > polyline,
-.c5:focus:not(:focus-visible) > rect {
-  outline: none;
-  box-shadow: none;
-}
-
-.c5:focus:not(:focus-visible)::-moz-focus-inner {
-  border: 0;
-}
-
 @media only screen and (max-width:768px) {
   .c0 {
     margin-bottom: 24px;
@@ -182,7 +124,7 @@ exports[`<Footer /> should render mobile version of footer 1`] = `
     class="c1"
   >
     <span>
-      ROSE Wallet is fully 
+      ROSE Wallet is 
     </span>
     <a
       class="c2"
@@ -194,9 +136,11 @@ exports[`<Footer /> should render mobile version of footer 1`] = `
         open source
       </span>
     </a>
+    <span>
+       and powered by
+    </span>
     <div
       class="c3"
-      style="display: inline-block;"
     >
       Powered by Oasis Scan API & Oasis gRPC
     </div>
@@ -233,17 +177,20 @@ exports[`<Footer /> should render mobile version of footer 1`] = `
     >
       1.0.0-dev.1
     </a>
+    <br />
     <span>
-       
+      (commit: 
     </span>
+    <a
+      class="c2"
+      href="https://github.com/oasisprotocol/oasis-wallet-web/commit/sha0000000000000000000000000000000000000"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      sha0000
+    </a>
     <span>
-      <button
-        class="c5"
-        type="button"
-      >
-        [show details]
-      </button>
-      <span />
+      ) built at 1/1/1970, 12:00:00 AM
     </span>
   </span>
   <span
diff --git a/src/app/components/Footer/__tests__/index.test.tsx b/src/app/components/Footer/__tests__/index.test.tsx
index 20dfc8f68e..8b4fe522d3 100644
--- a/src/app/components/Footer/__tests__/index.test.tsx
+++ b/src/app/components/Footer/__tests__/index.test.tsx
@@ -5,7 +5,6 @@ import { Provider } from 'react-redux'
 import { ThemeProvider } from 'styles/theme/ThemeProvider'
 import { configureAppStore } from 'store/configureStore'
 import { Wallet } from 'app/state/wallet/types'
-import userEvent from '@testing-library/user-event'
 
 import { Footer } from '..'
 
@@ -45,9 +44,6 @@ describe('<Footer />', () => {
   it('should render a link with commit sha after toggling', async () => {
     renderComponent(store, 'large')
 
-    const toggleLink = await screen.findByText(/\[show details\]/i)
-    await userEvent.click(toggleLink)
-
     const commitLink = await screen.findByRole('link', { name: /sha0000/i })
     expect(commitLink).toHaveAttribute(
       'href',
diff --git a/src/app/components/Footer/index.tsx b/src/app/components/Footer/index.tsx
index d3086046e4..cf05572606 100644
--- a/src/app/components/Footer/index.tsx
+++ b/src/app/components/Footer/index.tsx
@@ -2,7 +2,7 @@ import { Anchor } from 'grommet/es6/components/Anchor'
 import { Box } from 'grommet/es6/components/Box'
 import { Text } from 'grommet/es6/components/Text'
 import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
-import React, { memo, useState } from 'react'
+import React, { memo } from 'react'
 import { useSelector } from 'react-redux'
 import { Trans, useTranslation } from 'react-i18next'
 import { selectHasAccounts } from 'app/state/wallet/selectors'
@@ -10,13 +10,9 @@ import { intlDateTimeFormat } from '../DateFormatter/intlDateTimeFormat'
 import { backend } from 'vendors/backend'
 import { BackendAPIs } from 'config'
 import { mobileFooterNavigationHeight } from '../../../styles/theme/elementSizes'
-import { Button } from 'grommet/es6/components/Button'
 
 const githubLink = 'https://github.com/oasisprotocol/oasis-wallet-web/'
 const githubReleaseLink = (tag: string) => `${githubLink}releases/tag/${tag}`
-const buildTime =
-  process.env.REACT_APP_BUILD_DATETIME &&
-  `${intlDateTimeFormat(Number(process.env.REACT_APP_BUILD_DATETIME))}`
 
 function NoReleaseLink() {
   return <>-</>
@@ -26,11 +22,6 @@ export const Footer = memo(() => {
   const walletHasAccounts = useSelector(selectHasAccounts)
   const isMobile = React.useContext(ResponsiveContext) === 'small'
   const { t } = useTranslation()
-  const [showCommitLink, setShowCommitLink] = useState(false)
-
-  const toggleCommitLink = () => {
-    setShowCommitLink(!showCommitLink)
-  }
 
   const backendToLabel = {
     [BackendAPIs.OasisMonitor]: t(
@@ -40,7 +31,6 @@ export const Footer = memo(() => {
     [BackendAPIs.OasisScan]: t('footer.poweredBy.oasisscan', 'Powered by Oasis Scan API & Oasis gRPC'),
   }
   const poweredByLabel = backendToLabel[backend()]
-  const responsiveSize = isMobile ? 'small' : 'medium'
 
   return (
     <Box
@@ -57,20 +47,16 @@ export const Footer = memo(() => {
       margin={{ bottom: 'large' }}
       data-testid="footer"
     >
-      <Text size={responsiveSize} textAlign="center" margin={{ bottom: isMobile ? 'small' : 'none' }}>
+      <Text size="small" textAlign="center" margin={{ bottom: isMobile ? 'small' : 'none' }}>
         <Trans
           i18nKey="footer.github"
           t={t}
           components={{
             GithubLink: <Anchor href={githubLink} target="_blank" rel="noopener noreferrer" />,
           }}
-          defaults="ROSE Wallet is fully <GithubLink>open source</GithubLink>"
+          defaults="ROSE Wallet is <GithubLink>open source</GithubLink> and powered by"
         />
-        {poweredByLabel && (
-          <Box margin={{ right: 'xsmall', left: 'xsmall' }} style={{ display: 'inline-block' }}>
-            {poweredByLabel}
-          </Box>
-        )}
+        {poweredByLabel && <Box margin={{ right: 'xsmall', left: 'xsmall' }}>{poweredByLabel}</Box>}
       </Text>
       {process.env.REACT_APP_BUILD_DATETIME && process.env.REACT_APP_BUILD_SHA && (
         <Text size="small" textAlign="center" margin={{ top: 'small' }}>
@@ -103,37 +89,30 @@ export const Footer = memo(() => {
               ) : (
                 <NoReleaseLink />
               ),
+            }}
+            values={{
+              buildTime: intlDateTimeFormat(Number(process.env.REACT_APP_BUILD_DATETIME)),
+            }}
+            defaults="Version: <ReleaseLink/>"
+          />
+          <br />
+          <Trans
+            i18nKey="footer.buildDetails"
+            t={t}
+            components={{
               CommitLink: (
-                <span>
-                  <Button
-                    onClick={toggleCommitLink}
-                    label={
-                      showCommitLink
-                        ? t('footer.hideDetails', '[hide details]')
-                        : t('footer.showDetails', '[show details]')
-                    }
-                    plain
-                    color="link"
-                  />
-                  <span>
-                    {showCommitLink && process.env.REACT_APP_BUILD_SHA && (
-                      <span>
-                        <br />
-                        (commit:
-                        <Anchor
-                          href={`${githubLink}commit/${process.env.REACT_APP_BUILD_SHA}`}
-                          label={process.env.REACT_APP_BUILD_SHA.substring(0, 7)}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                        />
-                        ) built at {buildTime}
-                      </span>
-                    )}
-                  </span>
-                </span>
+                <Anchor
+                  href={`${githubLink}commit/${process.env.REACT_APP_BUILD_SHA}`}
+                  label={process.env.REACT_APP_BUILD_SHA.substring(0, 7)}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                />
               ),
             }}
-            defaults="Version: <ReleaseLink/> <CommitLink/>"
+            values={{
+              buildTime: intlDateTimeFormat(Number(process.env.REACT_APP_BUILD_DATETIME)),
+            }}
+            defaults="(commit: <CommitLink/>) built at {{buildTime}}"
           />
         </Text>
       )}
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 301c48b61d..432bfcb838 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -189,16 +189,15 @@
     "thirdPartyDisclaimer": "This service is provided by Transak - an external party. Oasis* does not carry any responsibility. All fees charged by Transak."
   },
   "footer": {
+    "buildDetails": "(commit: <CommitLink/>) built at {{buildTime}}",
     "feedback": "We’d love your feedback at <EmailLink>wallet@oasisprotocol.org</EmailLink>",
-    "github": "ROSE Wallet is fully <GithubLink>open source</GithubLink>",
-    "hideDetails": "[hide details]",
+    "github": "ROSE Wallet is <GithubLink>open source</GithubLink> and powered by",
     "poweredBy": {
       "oasismonitor": "Powered by Oasis Monitor API & Oasis gRPC",
       "oasisscan": "Powered by Oasis Scan API & Oasis gRPC"
     },
-    "showDetails": "[show details]",
     "terms": "<TermsLink>Terms and Conditions</TermsLink>",
-    "version": "Version: <ReleaseLink/> <CommitLink/>"
+    "version": "Version: <ReleaseLink/>"
   },
   "home": {
     "create": {

From dacb9ce9eafb06b9af8a15ea62c7d739b55553a3 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Mon, 1 Jul 2024 11:29:06 +0200
Subject: [PATCH 5/9] Align desktop footer with new designs

---
 .../__snapshots__/index.test.tsx.snap         | 184 +++++++++++-------
 .../Footer/__tests__/index.test.tsx           |   2 +-
 src/app/components/Footer/index.tsx           | 169 +++++++++-------
 src/locales/en/translation.json               |   4 +-
 4 files changed, 214 insertions(+), 145 deletions(-)

diff --git a/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap
index 7add79b2b7..c2019e63e4 100644
--- a/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap
@@ -29,7 +29,21 @@ exports[`<Footer /> should render mobile version of footer 1`] = `
   border-radius: 5px;
 }
 
-.c3 {
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  min-height: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -45,7 +59,17 @@ exports[`<Footer /> should render mobile version of footer 1`] = `
   flex-direction: column;
 }
 
-.c2 {
+.c4 {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  height: 0;
+}
+
+.c3 {
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -60,19 +84,19 @@ exports[`<Footer /> should render mobile version of footer 1`] = `
   cursor: pointer;
 }
 
-.c2:hover {
+.c3:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c1 {
+.c2 {
   margin-bottom: 12px;
   font-size: 14px;
   line-height: 20px;
   text-align: center;
 }
 
-.c4 {
+.c5 {
   margin-top: 12px;
   font-size: 14px;
   line-height: 20px;
@@ -105,13 +129,13 @@ exports[`<Footer /> should render mobile version of footer 1`] = `
 }
 
 @media only screen and (max-width:768px) {
-  .c3 {
+  .c6 {
     margin-left: 3px;
   }
 }
 
 @media only screen and (max-width:768px) {
-  .c3 {
+  .c6 {
     margin-right: 3px;
   }
 }
@@ -120,87 +144,107 @@ exports[`<Footer /> should render mobile version of footer 1`] = `
   class="c0"
   data-testid="footer"
 >
-  <span
+  <div
     class="c1"
+    style="flex: 1; align-self: center;"
   >
-    <span>
-      ROSE Wallet is 
-    </span>
-    <a
+    <span
       class="c2"
-      href="https://github.com/oasisprotocol/oasis-wallet-web/"
-      rel="noopener noreferrer"
-      target="_blank"
+      style="display: inline-flex; flex-direction: column;"
     >
       <span>
-        open source
+        <span>
+          ROSE Wallet is 
+        </span>
+        <a
+          class="c3"
+          href="https://github.com/oasisprotocol/oasis-wallet-web/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <span>
+            open source
+          </span>
+        </a>
+        <span>
+           and powered by
+        </span>
+        <br />
+        <span>
+          Oasis Scan API & Oasis gRPC
+        </span>
       </span>
-    </a>
-    <span>
-       and powered by
     </span>
-    <div
-      class="c3"
-    >
-      Powered by Oasis Scan API & Oasis gRPC
-    </div>
-  </span>
-  <span
+  </div>
+  <div
     class="c4"
+  />
+  <div
+    class="c1"
+    style="flex: 1; align-self: center;"
   >
-    <span>
-      <a
-        class="c2"
-        href="https://wallet.oasis.io/t-c.pdf"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
+    <span
+      class="c5"
+    >
+      <span>
+        <a
+          class="c3"
+          href="https://wallet.oasis.io/t-c.pdf"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <span>
+            Terms and Conditions
+          </span>
+        </a>
+        <div
+          class="c6"
+          style="display: inline-block;"
+        >
+          |
+        </div>
+      </span>
+      <span>
         <span>
-          Terms and Conditions
+          Version: 
         </span>
-      </a>
-      <div
-        class="c3"
-        style="display: inline-block;"
-      >
-        |
-      </div>
-    </span>
-    <span>
-      Version: 
-    </span>
-    <a
-      class="c2"
-      href="https://github.com/oasisprotocol/oasis-wallet-web/releases/tag/v1.0.0-dev.1"
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      1.0.0-dev.1
-    </a>
-    <br />
-    <span>
-      (commit: 
-    </span>
-    <a
-      class="c2"
-      href="https://github.com/oasisprotocol/oasis-wallet-web/commit/sha0000000000000000000000000000000000000"
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      sha0000
-    </a>
-    <span>
-      ) built at 1/1/1970, 12:00:00 AM
+        <a
+          class="c3"
+          href="https://github.com/oasisprotocol/oasis-wallet-web/releases/tag/v1.0.0-dev.1"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          1.0.0-dev.1
+        </a>
+        <br />
+        <span>
+          (commit: 
+        </span>
+        <a
+          class="c3"
+          href="https://github.com/oasisprotocol/oasis-wallet-web/commit/sha0000000000000000000000000000000000000"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          sha0000
+        </a>
+        <span>
+          ) built at 1/1/1970, 12:00:00 AM
+        </span>
+      </span>
     </span>
-  </span>
-  <span
+  </div>
+  <div
     class="c4"
+  />
+  <span
+    class="c5"
   >
     <span>
       We’d love your feedback at 
     </span>
     <a
-      class="c2"
+      class="c3"
       href="mailto:wallet@oasisprotocol.org"
     >
       <span>
diff --git a/src/app/components/Footer/__tests__/index.test.tsx b/src/app/components/Footer/__tests__/index.test.tsx
index 8b4fe522d3..e883b13b19 100644
--- a/src/app/components/Footer/__tests__/index.test.tsx
+++ b/src/app/components/Footer/__tests__/index.test.tsx
@@ -63,7 +63,7 @@ describe('<Footer />', () => {
   it('should render backend label', () => {
     renderComponent(store, 'large')
 
-    expect(screen.getByText(/Powered by Oasis Scan API.*/)).toBeInTheDocument()
+    expect(screen.getByText(/Oasis Scan API/)).toBeInTheDocument()
   })
 
   it('should render mobile version of footer', () => {
diff --git a/src/app/components/Footer/index.tsx b/src/app/components/Footer/index.tsx
index cf05572606..82d8225f39 100644
--- a/src/app/components/Footer/index.tsx
+++ b/src/app/components/Footer/index.tsx
@@ -24,19 +24,16 @@ export const Footer = memo(() => {
   const { t } = useTranslation()
 
   const backendToLabel = {
-    [BackendAPIs.OasisMonitor]: t(
-      'footer.poweredBy.oasismonitor',
-      'Powered by Oasis Monitor API & Oasis gRPC',
-    ),
-    [BackendAPIs.OasisScan]: t('footer.poweredBy.oasisscan', 'Powered by Oasis Scan API & Oasis gRPC'),
+    [BackendAPIs.OasisMonitor]: t('footer.poweredBy.oasismonitor', 'Oasis Monitor API & Oasis gRPC'),
+    [BackendAPIs.OasisScan]: t('footer.poweredBy.oasisscan', 'Oasis Scan API & Oasis gRPC'),
   }
   const poweredByLabel = backendToLabel[backend()]
 
   return (
     <Box
       as="footer"
-      direction="column"
-      justify="center"
+      direction={isMobile ? 'column' : 'row'}
+      justify={isMobile ? 'center' : 'between'}
       align="center"
       round="5px"
       pad={{
@@ -46,86 +43,114 @@ export const Footer = memo(() => {
       }}
       margin={{ bottom: 'large' }}
       data-testid="footer"
+      gap={isMobile ? '0' : '20px'}
     >
-      <Text size="small" textAlign="center" margin={{ bottom: isMobile ? 'small' : 'none' }}>
-        <Trans
-          i18nKey="footer.github"
-          t={t}
-          components={{
-            GithubLink: <Anchor href={githubLink} target="_blank" rel="noopener noreferrer" />,
-          }}
-          defaults="ROSE Wallet is <GithubLink>open source</GithubLink> and powered by"
-        />
-        {poweredByLabel && <Box margin={{ right: 'xsmall', left: 'xsmall' }}>{poweredByLabel}</Box>}
-      </Text>
-      {process.env.REACT_APP_BUILD_DATETIME && process.env.REACT_APP_BUILD_SHA && (
-        <Text size="small" textAlign="center" margin={{ top: 'small' }}>
+      <Box style={{ flex: 1, alignSelf: isMobile ? 'center ' : 'flex-start' }}>
+        <Text
+          size="small"
+          textAlign={isMobile ? 'center' : 'start'}
+          margin={{ bottom: isMobile ? 'small' : 'none' }}
+          style={{ display: 'inline-flex', flexDirection: isMobile ? 'column' : 'row' }}
+        >
           <span>
             <Trans
-              i18nKey="footer.terms"
+              i18nKey="footer.github"
               t={t}
               components={{
-                TermsLink: (
-                  <Anchor href="https://wallet.oasis.io/t-c.pdf" target="_blank" rel="noopener noreferrer" />
-                ),
+                GithubLink: <Anchor href={githubLink} target="_blank" rel="noopener noreferrer" />,
               }}
-              defaults="<TermsLink>Terms and Conditions</TermsLink>"
+              values={{
+                poweredBy: poweredByLabel,
+              }}
+              defaults="ROSE Wallet is <GithubLink>open source</GithubLink> and powered by"
             />
-            <Box margin={{ right: 'xsmall', left: 'xsmall' }} style={{ display: 'inline-block' }}>
-              |
-            </Box>
+            {isMobile ? <br /> : <span> </span>}
+            <span>{poweredByLabel}</span>
           </span>
+        </Text>
+      </Box>
+      {process.env.REACT_APP_BUILD_DATETIME && process.env.REACT_APP_BUILD_SHA && (
+        <Box style={{ flex: 1, alignSelf: isMobile ? 'center ' : 'flex-start' }}>
+          <Text
+            size="small"
+            textAlign={isMobile ? 'center' : 'end'}
+            margin={{ top: isMobile ? 'small' : 'none' }}
+          >
+            <span>
+              <Trans
+                i18nKey="footer.terms"
+                t={t}
+                components={{
+                  TermsLink: (
+                    <Anchor
+                      href="https://wallet.oasis.io/t-c.pdf"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    />
+                  ),
+                }}
+                defaults="<TermsLink>Terms and Conditions</TermsLink>"
+              />
+              <Box margin={{ right: 'xsmall', left: 'xsmall' }} style={{ display: 'inline-block' }}>
+                |
+              </Box>
+            </span>
+            <span>
+              <Trans
+                i18nKey="footer.version"
+                t={t}
+                components={{
+                  ReleaseLink: process.env.REACT_APP_BUILD_VERSION ? (
+                    <Anchor
+                      href={githubReleaseLink(process.env.REACT_APP_BUILD_VERSION)}
+                      label={process.env.REACT_APP_BUILD_VERSION.replace('v', '')}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    />
+                  ) : (
+                    <NoReleaseLink />
+                  ),
+                }}
+                values={{
+                  buildTime: intlDateTimeFormat(Number(process.env.REACT_APP_BUILD_DATETIME)),
+                }}
+                defaults="Version: <ReleaseLink/>"
+              />
+              {isMobile ? <br /> : <span> </span>}
+              <Trans
+                i18nKey="footer.buildDetails"
+                t={t}
+                components={{
+                  CommitLink: (
+                    <Anchor
+                      href={`${githubLink}commit/${process.env.REACT_APP_BUILD_SHA}`}
+                      label={process.env.REACT_APP_BUILD_SHA.substring(0, 7)}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    />
+                  ),
+                }}
+                values={{
+                  buildTime: intlDateTimeFormat(Number(process.env.REACT_APP_BUILD_DATETIME)),
+                }}
+                defaults="(commit: <CommitLink/>) built at {{buildTime}}"
+              />
+            </span>
+          </Text>
+        </Box>
+      )}
+      {isMobile && (
+        <Text size="small" textAlign="center" margin={{ top: 'small' }}>
           <Trans
-            i18nKey="footer.version"
-            t={t}
-            components={{
-              ReleaseLink: process.env.REACT_APP_BUILD_VERSION ? (
-                <Anchor
-                  href={githubReleaseLink(process.env.REACT_APP_BUILD_VERSION)}
-                  label={process.env.REACT_APP_BUILD_VERSION.replace('v', '')}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                />
-              ) : (
-                <NoReleaseLink />
-              ),
-            }}
-            values={{
-              buildTime: intlDateTimeFormat(Number(process.env.REACT_APP_BUILD_DATETIME)),
-            }}
-            defaults="Version: <ReleaseLink/>"
-          />
-          <br />
-          <Trans
-            i18nKey="footer.buildDetails"
+            i18nKey="footer.feedback"
             t={t}
             components={{
-              CommitLink: (
-                <Anchor
-                  href={`${githubLink}commit/${process.env.REACT_APP_BUILD_SHA}`}
-                  label={process.env.REACT_APP_BUILD_SHA.substring(0, 7)}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                />
-              ),
-            }}
-            values={{
-              buildTime: intlDateTimeFormat(Number(process.env.REACT_APP_BUILD_DATETIME)),
+              EmailLink: <Anchor href="mailto:wallet@oasisprotocol.org" />,
             }}
-            defaults="(commit: <CommitLink/>) built at {{buildTime}}"
+            defaults="We’d love your feedback at <EmailLink>wallet@oasisprotocol.org</EmailLink>"
           />
         </Text>
       )}
-      <Text size="small" textAlign="center" margin={{ top: 'small' }}>
-        <Trans
-          i18nKey="footer.feedback"
-          t={t}
-          components={{
-            EmailLink: <Anchor href="mailto:wallet@oasisprotocol.org" />,
-          }}
-          defaults="We’d love your feedback at <EmailLink>wallet@oasisprotocol.org</EmailLink>"
-        />
-      </Text>
     </Box>
   )
 })
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 432bfcb838..2d174f9941 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -193,8 +193,8 @@
     "feedback": "We’d love your feedback at <EmailLink>wallet@oasisprotocol.org</EmailLink>",
     "github": "ROSE Wallet is <GithubLink>open source</GithubLink> and powered by",
     "poweredBy": {
-      "oasismonitor": "Powered by Oasis Monitor API & Oasis gRPC",
-      "oasisscan": "Powered by Oasis Scan API & Oasis gRPC"
+      "oasismonitor": "Oasis Monitor API & Oasis gRPC",
+      "oasisscan": "Oasis Scan API & Oasis gRPC"
     },
     "terms": "<TermsLink>Terms and Conditions</TermsLink>",
     "version": "Version: <ReleaseLink/>"

From 8152bbda06bc6ec79e40ced027f61537d465a529 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Sat, 6 Jul 2024 09:44:46 +0200
Subject: [PATCH 6/9] Change the order of dekstop footer

---
 .../__snapshots__/index.test.tsx.snap         |   7 +-
 src/app/components/Footer/index.tsx           | 146 +++++++++++-------
 2 files changed, 91 insertions(+), 62 deletions(-)

diff --git a/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap
index c2019e63e4..d476d6ac63 100644
--- a/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap
@@ -186,7 +186,10 @@ exports[`<Footer /> should render mobile version of footer 1`] = `
     <span
       class="c5"
     >
-      <span>
+      <div
+        class="c1"
+        style="display: inline-flex; flex-direction: row;"
+      >
         <a
           class="c3"
           href="https://wallet.oasis.io/t-c.pdf"
@@ -203,7 +206,7 @@ exports[`<Footer /> should render mobile version of footer 1`] = `
         >
           |
         </div>
-      </span>
+      </div>
       <span>
         <span>
           Version: 
diff --git a/src/app/components/Footer/index.tsx b/src/app/components/Footer/index.tsx
index 82d8225f39..84352d0074 100644
--- a/src/app/components/Footer/index.tsx
+++ b/src/app/components/Footer/index.tsx
@@ -10,6 +10,7 @@ import { intlDateTimeFormat } from '../DateFormatter/intlDateTimeFormat'
 import { backend } from 'vendors/backend'
 import { BackendAPIs } from 'config'
 import { mobileFooterNavigationHeight } from '../../../styles/theme/elementSizes'
+import { t } from 'i18next'
 
 const githubLink = 'https://github.com/oasisprotocol/oasis-wallet-web/'
 const githubReleaseLink = (tag: string) => `${githubLink}releases/tag/${tag}`
@@ -76,66 +77,17 @@ export const Footer = memo(() => {
             textAlign={isMobile ? 'center' : 'end'}
             margin={{ top: isMobile ? 'small' : 'none' }}
           >
-            <span>
-              <Trans
-                i18nKey="footer.terms"
-                t={t}
-                components={{
-                  TermsLink: (
-                    <Anchor
-                      href="https://wallet.oasis.io/t-c.pdf"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    />
-                  ),
-                }}
-                defaults="<TermsLink>Terms and Conditions</TermsLink>"
-              />
-              <Box margin={{ right: 'xsmall', left: 'xsmall' }} style={{ display: 'inline-block' }}>
-                |
-              </Box>
-            </span>
-            <span>
-              <Trans
-                i18nKey="footer.version"
-                t={t}
-                components={{
-                  ReleaseLink: process.env.REACT_APP_BUILD_VERSION ? (
-                    <Anchor
-                      href={githubReleaseLink(process.env.REACT_APP_BUILD_VERSION)}
-                      label={process.env.REACT_APP_BUILD_VERSION.replace('v', '')}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    />
-                  ) : (
-                    <NoReleaseLink />
-                  ),
-                }}
-                values={{
-                  buildTime: intlDateTimeFormat(Number(process.env.REACT_APP_BUILD_DATETIME)),
-                }}
-                defaults="Version: <ReleaseLink/>"
-              />
-              {isMobile ? <br /> : <span> </span>}
-              <Trans
-                i18nKey="footer.buildDetails"
-                t={t}
-                components={{
-                  CommitLink: (
-                    <Anchor
-                      href={`${githubLink}commit/${process.env.REACT_APP_BUILD_SHA}`}
-                      label={process.env.REACT_APP_BUILD_SHA.substring(0, 7)}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    />
-                  ),
-                }}
-                values={{
-                  buildTime: intlDateTimeFormat(Number(process.env.REACT_APP_BUILD_DATETIME)),
-                }}
-                defaults="(commit: <CommitLink/>) built at {{buildTime}}"
-              />
-            </span>
+            {isMobile ? (
+              <>
+                <TermsAndConditions />
+                <Version />
+              </>
+            ) : (
+              <>
+                <Version />
+                <TermsAndConditions />
+              </>
+            )}
           </Text>
         </Box>
       )}
@@ -154,3 +106,77 @@ export const Footer = memo(() => {
     </Box>
   )
 })
+
+const TermsAndConditions = () => {
+  const isMobile = React.useContext(ResponsiveContext) === 'small'
+
+  return (
+    <Box style={{ display: 'inline-flex', flexDirection: isMobile ? 'row' : 'row-reverse' }}>
+      <Trans
+        i18nKey="footer.terms"
+        t={t}
+        components={{
+          TermsLink: (
+            <Anchor href="https://wallet.oasis.io/t-c.pdf" target="_blank" rel="noopener noreferrer" />
+          ),
+        }}
+        defaults="<TermsLink>Terms and Conditions</TermsLink>"
+      />
+      <Box margin={{ right: 'xsmall', left: 'xsmall' }} style={{ display: 'inline-block' }}>
+        |
+      </Box>
+    </Box>
+  )
+}
+
+const Version = () => {
+  const isMobile = React.useContext(ResponsiveContext) === 'small'
+
+  if (!process.env.REACT_APP_BUILD_SHA) {
+    return null
+  }
+
+  return (
+    <span>
+      <Trans
+        i18nKey="footer.version"
+        t={t}
+        components={{
+          ReleaseLink: process.env.REACT_APP_BUILD_VERSION ? (
+            <Anchor
+              href={githubReleaseLink(process.env.REACT_APP_BUILD_VERSION)}
+              label={process.env.REACT_APP_BUILD_VERSION.replace('v', '')}
+              target="_blank"
+              rel="noopener noreferrer"
+            />
+          ) : (
+            <NoReleaseLink />
+          ),
+        }}
+        values={{
+          buildTime: intlDateTimeFormat(Number(process.env.REACT_APP_BUILD_DATETIME)),
+        }}
+        defaults="Version: <ReleaseLink/>"
+      />
+      {isMobile ? <br /> : <span> </span>}
+      <Trans
+        i18nKey="footer.buildDetails"
+        t={t}
+        components={{
+          CommitLink: (
+            <Anchor
+              href={`${githubLink}commit/${process.env.REACT_APP_BUILD_SHA}`}
+              label={process.env.REACT_APP_BUILD_SHA.substring(0, 7)}
+              target="_blank"
+              rel="noopener noreferrer"
+            />
+          ),
+        }}
+        values={{
+          buildTime: intlDateTimeFormat(Number(process.env.REACT_APP_BUILD_DATETIME)),
+        }}
+        defaults="(commit: <CommitLink/>) built at {{buildTime}}"
+      />
+    </span>
+  )
+}

From b987e209ad17dbf3f78f5a6d29b911e00b237a14 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Mon, 1 Jul 2024 14:03:24 +0200
Subject: [PATCH 7/9] Sync tablet and mobile footer

---
 src/app/components/Footer/PageFooter.tsx      |  8 ++--
 src/app/components/Footer/index.tsx           | 45 ++++++++++---------
 .../Toolbar/Features/Settings/index.tsx       |  5 ++-
 3 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/src/app/components/Footer/PageFooter.tsx b/src/app/components/Footer/PageFooter.tsx
index 254e2ea95a..122116e34e 100644
--- a/src/app/components/Footer/PageFooter.tsx
+++ b/src/app/components/Footer/PageFooter.tsx
@@ -8,18 +8,18 @@ import { Footer } from '.'
 
 export const PageFooter = () => {
   const isMobile = useContext(ResponsiveContext) === 'small'
+  const isDesktop = useContext(ResponsiveContext) === 'large'
   const walletHasAccounts = useSelector(selectHasAccounts)
 
   return (
     <>
-      {walletHasAccounts && isMobile ? (
-        // Footer for opened wallet is rendered in Settings tab in Profile dropdown
+      {walletHasAccounts && isMobile && (
         <Box pad="xlarge">
           <MobileFooterNavigation />
         </Box>
-      ) : (
-        <Footer />
       )}
+      {/* Footer for opened wallet is rendered in Settings tab in Profile dropdown */}
+      {((walletHasAccounts && isDesktop) || !walletHasAccounts) && <Footer />}
     </>
   )
 }
diff --git a/src/app/components/Footer/index.tsx b/src/app/components/Footer/index.tsx
index 84352d0074..09f51b88ce 100644
--- a/src/app/components/Footer/index.tsx
+++ b/src/app/components/Footer/index.tsx
@@ -2,7 +2,7 @@ import { Anchor } from 'grommet/es6/components/Anchor'
 import { Box } from 'grommet/es6/components/Box'
 import { Text } from 'grommet/es6/components/Text'
 import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
-import React, { memo } from 'react'
+import React, { memo, useContext } from 'react'
 import { useSelector } from 'react-redux'
 import { Trans, useTranslation } from 'react-i18next'
 import { selectHasAccounts } from 'app/state/wallet/selectors'
@@ -21,7 +21,8 @@ function NoReleaseLink() {
 
 export const Footer = memo(() => {
   const walletHasAccounts = useSelector(selectHasAccounts)
-  const isMobile = React.useContext(ResponsiveContext) === 'small'
+  const responsiveContext = useContext(ResponsiveContext)
+  const isMobileOrTablet = responsiveContext === 'small' || responsiveContext === 'medium'
   const { t } = useTranslation()
 
   const backendToLabel = {
@@ -33,25 +34,25 @@ export const Footer = memo(() => {
   return (
     <Box
       as="footer"
-      direction={isMobile ? 'column' : 'row'}
-      justify={isMobile ? 'center' : 'between'}
+      direction={isMobileOrTablet ? 'column' : 'row'}
+      justify={isMobileOrTablet ? 'center' : 'between'}
       align="center"
       round="5px"
       pad={{
         horizontal: 'medium',
-        top: isMobile ? '1rem' : 'medium',
-        bottom: isMobile && walletHasAccounts ? mobileFooterNavigationHeight : 'none',
+        top: isMobileOrTablet ? '1rem' : 'medium',
+        bottom: isMobileOrTablet && walletHasAccounts ? mobileFooterNavigationHeight : 'none',
       }}
       margin={{ bottom: 'large' }}
       data-testid="footer"
-      gap={isMobile ? '0' : '20px'}
+      gap={isMobileOrTablet ? '0' : '20px'}
     >
-      <Box style={{ flex: 1, alignSelf: isMobile ? 'center ' : 'flex-start' }}>
+      <Box style={{ flex: 1, alignSelf: isMobileOrTablet ? 'center ' : 'flex-start' }}>
         <Text
           size="small"
-          textAlign={isMobile ? 'center' : 'start'}
-          margin={{ bottom: isMobile ? 'small' : 'none' }}
-          style={{ display: 'inline-flex', flexDirection: isMobile ? 'column' : 'row' }}
+          textAlign={isMobileOrTablet ? 'center' : 'start'}
+          margin={{ bottom: isMobileOrTablet ? 'small' : 'none' }}
+          style={{ display: 'inline-flex', flexDirection: isMobileOrTablet ? 'column' : 'row' }}
         >
           <span>
             <Trans
@@ -65,19 +66,19 @@ export const Footer = memo(() => {
               }}
               defaults="ROSE Wallet is <GithubLink>open source</GithubLink> and powered by"
             />
-            {isMobile ? <br /> : <span> </span>}
+            {isMobileOrTablet ? <br /> : <span> </span>}
             <span>{poweredByLabel}</span>
           </span>
         </Text>
       </Box>
       {process.env.REACT_APP_BUILD_DATETIME && process.env.REACT_APP_BUILD_SHA && (
-        <Box style={{ flex: 1, alignSelf: isMobile ? 'center ' : 'flex-start' }}>
+        <Box style={{ flex: 1, alignSelf: isMobileOrTablet ? 'center ' : 'flex-start' }}>
           <Text
             size="small"
-            textAlign={isMobile ? 'center' : 'end'}
-            margin={{ top: isMobile ? 'small' : 'none' }}
+            textAlign={isMobileOrTablet ? 'center' : 'end'}
+            margin={{ top: isMobileOrTablet ? 'small' : 'none' }}
           >
-            {isMobile ? (
+            {isMobileOrTablet ? (
               <>
                 <TermsAndConditions />
                 <Version />
@@ -91,7 +92,7 @@ export const Footer = memo(() => {
           </Text>
         </Box>
       )}
-      {isMobile && (
+      {isMobileOrTablet && (
         <Text size="small" textAlign="center" margin={{ top: 'small' }}>
           <Trans
             i18nKey="footer.feedback"
@@ -108,10 +109,11 @@ export const Footer = memo(() => {
 })
 
 const TermsAndConditions = () => {
-  const isMobile = React.useContext(ResponsiveContext) === 'small'
+  const responsiveContext = useContext(ResponsiveContext)
+  const isMobileOrTablet = responsiveContext === 'small' || responsiveContext === 'medium'
 
   return (
-    <Box style={{ display: 'inline-flex', flexDirection: isMobile ? 'row' : 'row-reverse' }}>
+    <Box style={{ display: 'inline-flex', flexDirection: isMobileOrTablet ? 'row' : 'row-reverse' }}>
       <Trans
         i18nKey="footer.terms"
         t={t}
@@ -130,7 +132,8 @@ const TermsAndConditions = () => {
 }
 
 const Version = () => {
-  const isMobile = React.useContext(ResponsiveContext) === 'small'
+  const responsiveContext = useContext(ResponsiveContext)
+  const isMobileOrTablet = responsiveContext === 'small' || responsiveContext === 'medium'
 
   if (!process.env.REACT_APP_BUILD_SHA) {
     return null
@@ -158,7 +161,7 @@ const Version = () => {
         }}
         defaults="Version: <ReleaseLink/>"
       />
-      {isMobile ? <br /> : <span> </span>}
+      {isMobileOrTablet ? <br /> : <span> </span>}
       <Trans
         i18nKey="footer.buildDetails"
         t={t}
diff --git a/src/app/components/Toolbar/Features/Settings/index.tsx b/src/app/components/Toolbar/Features/Settings/index.tsx
index b434482aee..396161afa2 100644
--- a/src/app/components/Toolbar/Features/Settings/index.tsx
+++ b/src/app/components/Toolbar/Features/Settings/index.tsx
@@ -6,7 +6,8 @@ import { LanguageSelect } from 'app/components/LanguageSelect'
 import { Footer } from 'app/components/Footer'
 
 export const Settings = () => {
-  const isMobile = useContext(ResponsiveContext) === 'small'
+  const responsiveContext = useContext(ResponsiveContext)
+  const isMobileOrTablet = responsiveContext === 'small' || responsiveContext === 'medium'
 
   return (
     <Box gap="small" style={{ flex: 1, justifyContent: 'space-between' }}>
@@ -14,7 +15,7 @@ export const Settings = () => {
         <LanguageSelect />
         <ThemeSelect />
       </Box>
-      {isMobile && <Footer />}
+      {isMobileOrTablet && <Footer />}
     </Box>
   )
 }

From b402e92051648c37ce6d93ac630d153beb46e317 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Tue, 2 Jul 2024 10:52:42 +0200
Subject: [PATCH 8/9] Remove margins for mobile and tablet

---
 .../__tests__/__snapshots__/index.test.tsx.snap       | 11 ++---------
 src/app/components/Footer/index.tsx                   |  6 +++---
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap
index d476d6ac63..c6929f5cbb 100644
--- a/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`<Footer /> should render mobile version of footer 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
-  margin-bottom: 48px;
+  margin-bottom: 0px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -25,7 +25,6 @@ exports[`<Footer /> should render mobile version of footer 1`] = `
   padding-left: 24px;
   padding-right: 24px;
   padding-top: 1rem;
-  padding-bottom: 4rem;
   border-radius: 5px;
 }
 
@@ -105,7 +104,7 @@ exports[`<Footer /> should render mobile version of footer 1`] = `
 
 @media only screen and (max-width:768px) {
   .c0 {
-    margin-bottom: 24px;
+    margin-bottom: 0px;
   }
 }
 
@@ -122,12 +121,6 @@ exports[`<Footer /> should render mobile version of footer 1`] = `
   }
 }
 
-@media only screen and (max-width:768px) {
-  .c0 {
-    padding-bottom: 4rem;
-  }
-}
-
 @media only screen and (max-width:768px) {
   .c6 {
     margin-left: 3px;
diff --git a/src/app/components/Footer/index.tsx b/src/app/components/Footer/index.tsx
index 09f51b88ce..cdea4a7edd 100644
--- a/src/app/components/Footer/index.tsx
+++ b/src/app/components/Footer/index.tsx
@@ -9,7 +9,6 @@ import { selectHasAccounts } from 'app/state/wallet/selectors'
 import { intlDateTimeFormat } from '../DateFormatter/intlDateTimeFormat'
 import { backend } from 'vendors/backend'
 import { BackendAPIs } from 'config'
-import { mobileFooterNavigationHeight } from '../../../styles/theme/elementSizes'
 import { t } from 'i18next'
 
 const githubLink = 'https://github.com/oasisprotocol/oasis-wallet-web/'
@@ -41,9 +40,10 @@ export const Footer = memo(() => {
       pad={{
         horizontal: 'medium',
         top: isMobileOrTablet ? '1rem' : 'medium',
-        bottom: isMobileOrTablet && walletHasAccounts ? mobileFooterNavigationHeight : 'none',
       }}
-      margin={{ bottom: 'large' }}
+      margin={{
+        bottom: (isMobileOrTablet && !walletHasAccounts) || !isMobileOrTablet ? 'medium' : 'none',
+      }}
       data-testid="footer"
       gap={isMobileOrTablet ? '0' : '20px'}
     >

From 2db50770da58f9b34ade9aca25b037b47fe71210 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Tue, 2 Jul 2024 10:26:02 +0200
Subject: [PATCH 9/9] Move footer to the bottom of page

---
 .../Footer/__tests__/__snapshots__/index.test.tsx.snap     | 7 +++++++
 src/app/components/Footer/index.tsx                        | 1 +
 2 files changed, 8 insertions(+)

diff --git a/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap
index c6929f5cbb..b043ba6049 100644
--- a/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap
@@ -8,6 +8,7 @@ exports[`<Footer /> should render mobile version of footer 1`] = `
   display: flex;
   box-sizing: border-box;
   max-width: 100%;
+  margin-top: auto;
   margin-bottom: 0px;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -102,6 +103,12 @@ exports[`<Footer /> should render mobile version of footer 1`] = `
   text-align: center;
 }
 
+@media only screen and (max-width:768px) {
+  .c0 {
+    margin-top: auto;
+  }
+}
+
 @media only screen and (max-width:768px) {
   .c0 {
     margin-bottom: 0px;
diff --git a/src/app/components/Footer/index.tsx b/src/app/components/Footer/index.tsx
index cdea4a7edd..fbb9d1232e 100644
--- a/src/app/components/Footer/index.tsx
+++ b/src/app/components/Footer/index.tsx
@@ -43,6 +43,7 @@ export const Footer = memo(() => {
       }}
       margin={{
         bottom: (isMobileOrTablet && !walletHasAccounts) || !isMobileOrTablet ? 'medium' : 'none',
+        top: 'auto',
       }}
       data-testid="footer"
       gap={isMobileOrTablet ? '0' : '20px'}